Question

基本上，我试图将子弹与表格中的上述td标签内容对齐。但是UL标签默认添加缩进。

我尝试添加margin:0, padding:0,它实际上一起删除子弹。我想在同一行中对齐句子而不删除子弹。

基本上在下面的jsfiddle示例中：heading2列应该全部对齐，意味着内容和项目符号应该从同一点开始

HTML：

<table class='table_css'>
    <th>heading1</th>
    <th>heading2</th>
    <tr><td>row1</td><td>content in row 1</td></tr>


    <tr>
        <td>some heading</td> 
       <td>
<ul> 
  <li>some text which is very long</li>
  <li>some text which is very long some text which is very long</li>
  <li>some text which is very long some text which is very long some text which is very long</li>
 </ul>
        </td>
           </tr>    
</table>

CSS：

ul{
    margin:0;

}

.table_css{
    border:1px solid;border-collapse: collapse;table-layout:fixed;
}

Jsfiddle

Answer 1

只需在左侧添加15px的填充，即水平对齐标题和项目符号。

＆＃13;

ul {
  margin: 0;
  padding-left: 15px;
}
.table_css {
  border: 1px solid;
  border-collapse: collapse;
  table-layout: fixed;
}

＆＃13;

<table class='table_css'>
  <th>heading1</th>
  <th>heading2</th>
  <tr>
    <td>row1</td>
    <td>content</td>
  </tr>


  <tr>
    <td>some heading</td>
    <td>
      <ul>
        <li>some text which is very long</li>
        <li>some text which is very long some text which is very long</li>
        <li>some text which is very long some text which is very long some text which is very long</li>
      </ul>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

您可能想要的是list-style-position: inside;。另外，修复您的html，因为th周围缺少一行。

https://jsfiddle.net/wgt7bsee/1/

删除td内的ul标签上的缩进

2 个答案: