如何使用CSS将“ float：right”表外的文本向左对齐

Question

I am trying to align the text " Legend " lefts the table. For the margin, it may not work when the windows screen has been resized (responsive). I tried the text-align: left or center but it didn't work as my expected.

Actually, the div element can be changed by using another one or adding JS to make it work.

Here is the Fiddle link: https://jsfiddle.net/h4bsp4or/

See the following screen-shot of how it should look like:

https://i.stack.imgur.com/hd92J.png

 .tdAlignTop { vertical-align: text-top !important; } .legendTable { border: 1px solid #A6A6A6; width: auto; /*margin-right: 0px; margin-left: auto;*/ float: right; } .legendTable span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; } .legendTable .legendTO { background-color: #A9D08E; } .legendTable .legendT { background-color: #A6A6A6; } .legendTable .legendM { background-color: #FF0039; } .legendTable .legendN { background-color: #000000; } 

  <TD class=tdAlignTop> <DIV>Legend</DIV> <TABLE class=legendTable> <TBODY> <TR> <TD> <SPAN class=legendT></SPAN>T</TD> </TR> <TR> <TD> <SPAN class=legendM></SPAN>M</TD> </TR> <TR> <TD> <SPAN class=legendN></SPAN>N To L</TD> </TR> <TR> <TD> <SPAN class=legendTO></SPAN>T TO</TD> </TR> </TBODY> </TABLE> </TD> 

Answer 1

You can do that in this way. Add

clear:both;

for the legend table. and

float:right and margin:[some] px;

for the div caption. It will stick the left side of the table top even on window resize.

 .tdAlignTop { vertical-align: text-top !important; } .legendTable { border: 1px solid #A6A6A6; width: auto; clear:both; /*margin-right: 0px; margin-left: auto;*/ float: right; } .legendTable span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; } .legendTable .legendTO { background-color: #A9D08E; } .legendTable .legendT { background-color: #A6A6A6; } .legendTable .legendM { background-color: #FF0039; } .legendTable .legendN { background-color: #000000; } 

  <TD class=tdAlignTop> <DIV style="float:right;margin-right:24px;">Legend</DIV> <TABLE class=legendTable> <TBODY> <TR> <TD> <SPAN class=legendT></SPAN>T</TD> </TR> <TR> <TD> <SPAN class=legendM></SPAN>M</TD> </TR> <TR> <TD> <SPAN class=legendN></SPAN>N To L</TD> </TR> <TR> <TD> <SPAN class=legendTO></SPAN>T TO</TD> </TR> </TBODY> </TABLE> </TD> 

Answer 2

You're floating .legendTable when you should be floating a wrapper around what's inside #tdAlignTop .

.legend-wrapper {
  float: right;
}

html:

<div class="legend-wrapper">
    <DIV>Legend</DIV>
    <TABLE class=legendTable>
      ...
    </TABLE>
</div>

See fiddle: https://jsfiddle.net/1hhya7xz/

Answer 3

您也可以将以下代码用于图例，但这不是最好的方法：

<DIV align="right">Legend</DIV>