css - 如何使用 CSS 将表格外的文本左对齐

Question

我正在尝试将文本 "Filter By:" 与表格对齐。对于边距，当 Windows 屏幕已调整大小(响应)时，它可能不起作用。我尝试了 text-align: left 或 center 但它没有像我预期的那样工作。

实际上，div 元素可以更改为另一个以使其工作。

这是 Fiddle 链接: https://jsfiddle.net/a26jsLg5/

请看下面的屏幕截图，它应该是什么样子:

.searchType table {
        border: 1px solid #A6A6A6;
        margin: 0px auto;
    }

<TD style="VERTICAL-ALIGN: text-top">
  <DIV>Filter by:</DIV>
  <DIV class=searchType>
    <TABLE>
      <TBODY>
        <TR>
          <TD>
            <INPUT type=radio CHECKED value=FullMap />
            <LABEL>Com 1</LABEL>
          </TD>
          <TD>
            <INPUT type=radio value=MissingCourses />
            <LABEL>Com 2</LABEL>
          </TD>
          <TD>
            <INPUT type=radio value=NeedToLearn />
            <LABEL>Com 3</LABEL>
          </TD>
        </TR>
      </TBODY>
    </TABLE>

Answer 1

只需在您的 CSS 中做一个小的更正。从您的 .searchType 表 css 中删除 margin: 0 auto

.searchType table {
        border: 1px solid #A6A6A6;
    }

<TD style="VERTICAL-ALIGN: text-top">
  <DIV class="filterLabel">Filter by:</DIV>
  <DIV class=searchType>
    <TABLE>
      <TBODY>
        <TR>
          <TD>
            <INPUT type=radio CHECKED value=FullMap />
            <LABEL>Com 1</LABEL>
          </TD>
          <TD>
            <INPUT type=radio value=MissingCourses />
            <LABEL>Com 2</LABEL>
          </TD>
          <TD>
            <INPUT type=radio value=NeedToLearn />
            <LABEL>Com 3</LABEL>
          </TD>
        </TR>
      </TBODY>
    </TABLE>