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

Question

我正在尝试将文字“图例”与表格对齐。对于边距，当窗口大小已调整大小（响应）时，它可能不起作用。我尝试了text-align: left或center，但它没有达到预期效果。

实际上，div元素可以通过使用另一个元素或添加JS来改变它。

以下是小提琴链接： 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>