Question

我正在尝试将文字＆＃34;过滤依据：＆＃34; 与表格对齐。对于边距，当窗口大小已调整大小（响应）时，它可能不起作用。我尝试了text-align: left或center，但它并没有像我预期的那样发挥作用。

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

以下是小提琴链接： https://jsfiddle.net/a26jsLg5/

请参阅以下屏幕截图：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

在你的CSS中做一个小小的修正。从您的margin: 0 auto css

中删除.searchType table

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

看看这个。https://codepen.io/jayakrishnancn/pen/WjBpZa

使用javascript的第一种方法

更改此行

<DIV>Filter by:</DIV>
<DIV class=searchType>

到

<DIV class="searchType">
<DIV id="filter_text" style="margin:0 auto">Filter by:</DIV>

并将此脚本添加到页面

<script>
 $('#filter_text').width($('#filter_text').next().width()); 
</script>

第二个id你事先知道表的最大宽度然后使用这个

<DIV class='searchType' style="width: 200px;margin:0  auto">
<DIV>Filter by:</DIV>
<TABLE style="width:100%">

这里不需要脚本，“过滤依据”也会保留在正确的位置（在之前的方法中，“过滤依据”将放在左侧，只有在jquery功能运行时才向右移动。

Answer 3

是的，您可以使用<caption>元素。它进入你的表格元素，然后你可以将它对齐。

.searchType table {
  border: 1px solid #A6A6A6;
  margin: 0px auto;
}

table caption {
  text-align: left;
}

<DIV class=searchType>
  <TABLE>
    <CAPTION>Filter by:</CAPTION>
    <TBODY>
      <TR>
        <TD>
          <INPUT type=radio CHECKED value=FullMap />
          <LABEL>Full learning map</LABEL>
        </TD>
        <TD>
          <INPUT type=radio value=MissingCourses />
          <LABEL>Missed courses</LABEL>
        </TD>
        <TD>
          <INPUT type=radio value=NeedToLearn />
          <LABEL>Courses need to learn</LABEL>
        </TD>
      </TR>
    </TBODY>
  </TABLE>
</DIV>

有关标题元素的更多信息：https://developer.mozilla.org/en/docs/Web/HTML/Element/caption

如何使用CSS将表左侧的文本对齐

3 个答案: