如何使用CSS將“ float：right”表外的文本向左對齊

Question

我正在嘗試將文本“ 圖例 ”左對齊。 為了保證頁邊距，在調整Windows屏幕大小（響應）時，它可能不起作用。 我嘗試了text-align: left或center但是沒有按我預期的那樣工作。

實際上，可以通過使用另一個元素或添加JS使其更改來更改div元素。

這是Fiddle鏈接： https : //jsfiddle.net/h4bsp4or/

請參見以下屏幕截圖，該截圖應為以下形式：

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

您可以通過這種方式進行操作。 加

clear:both;

圖例表。 和

float:right and margin:[some] px;

用於div標題。 即使在調整窗口大小時，它也會粘在桌面的左側。

 .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

你浮.legendTable時，你應該漂浮在里面有什么包裝#tdAlignTop 。

.legend-wrapper {
  float: right;
}

的HTML：

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

參見小提琴： https : //jsfiddle.net/1hhya7xz/

Answer 3

您也可以將以下代碼用於圖例，但這不是最好的方法：

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