保持段落标记中的多行均匀对齐

Question

th {
  background-color: #d7d7d7;
  color: white;
  font-family: 'Tw Cen MT';
  font-weight: normal;
  font-size: 24px;
  padding: 25px;
  border-style: solid;
  height: 300px;
  width: 250px;
  text-align: left;
  bottom: auto;
  right: auto;
  left: auto;
  vertical-align: top;
  border-left: 14px solid white;
  border-right: 15px solid white;
  /*AVOIDS TEXT FROM GETTING UNDER BULLET ICON */
  padding-left: 53px;
  text-indent: -33px;
}


/*KEEPS THE TEXT IN LINE */

.test {
  margin: auto;
  cursor: pointer;
}

p {
  margin: auto;
}

.underline_hover:hover {
  text-decoration: underline;
}

<table>
  <tbody>
    <tr>

      <th><span class="test" style="color: black;">
    
    <!-- Heading #1 of the Column-->
    <p style="text-align: left;"><strong>Header works fine</strong></p>
    
    <!-- Bulleted points of the Column-->
    <li onclick="location.href = '#';"><span class="underline_hover">Bullet #1</span></li>

        <br>

        <!-- Heading #2 of the Column-->
        <p style="text-align: left;"><strong>This is the header that is causing problems in smaller displays </strong></p>


        <li onclick="location.href = '#';"><span class="underline_hover">Bullet #2</span></li>


        </span>
      </th>

    </tr>
  </tbody>
</table>

嘿StackOverflow社区！我一直在设计表格布局，我遇到了一个问题。 <p>标签包含我桌子的标题。

对于标题文本：在较小的显示中，前一行的行与第一行中的对齐设置对齐。我尽力解决这个问题，但每次都失败了。这里的任何帮助将不胜感激。

谢谢

Answer 1

编辑：还将li包裹在ul内部，并将ul css设置如下：

ul {
  list-style-position: outside;
  padding-left: 25px;
}

删除text-indent属性并使用padding-left设置左侧间距。见下面的代码：

th {
  background-color: #d7d7d7;
  color: white;
  font-family: 'Tw Cen MT';
  font-weight: normal;
  font-size: 24px;
  padding: 25px;
  border-style: solid;
  height: 300px;
  width: 250px;
  text-align: left;
  bottom: auto;
  right: auto;
  left: auto;
  vertical-align: top;
  border-left: 14px solid white;
  border-right: 15px solid white;
  /*AVOIDS TEXT FROM GETTING UNDER BULLET ICON */
  padding-left: 35px;
  //text-indent: -33px;
}

ul {
  list-style-position: outside;
  padding-left: 25px;
}


/*KEEPS THE TEXT IN LINE */

.test {
  margin: auto;
  cursor: pointer;
}

p {
  margin: auto;
}

.underline_hover:hover {
  text-decoration: underline;
}

<div>



  <table>
    <tbody>
      <tr>



        <th><span class="test" style="color: black;">

<!-- Heading #1 of the Column-->
<p style="text-align: left;"><strong>Header works fine</strong></p>



<!-- Bulleted points of the Column-->
<ul>
<li onclick="location.href = '#';"><span class="underline_hover">Bullet #1</span></li>
          </ul>

          <br>

          <!-- Heading #2 of the Column-->
          <p style="text-align: left;"><strong>This is the header that is causing problems in smaller displays </strong></p>

          <ul>
            <li onclick="location.href = '#';"><span class="underline_hover">Bullet #2 This is a really long text that is causing problems in smaller displays.</span></li>
          </ul>

          </span>
        </th>

      </tr>
    </tbody>
  </table>


</div>

Answer 2

如果您正在寻找只有一列的表格，我会将您的HTML更改为更像这样的内容：

<table>
    <tbody>
        <tr>

            <!-- Heading #1 of the Column-->
            <h2>Header works fine</h2>

            <!-- Bulleted points of the Column-->
            <ul>
                <li><a href="#">Bullet</a></li>
            </ul>

        </tr>
        <tr>

            <!-- Heading #2 of the Column-->
            <h2>Header that is causing problems</h2>

            <!-- Bulleted points of the Column-->
            <ul>
                <li><a href="#">Bullet</a></li>
            </ul>

        </tr>
    </tbody>
</table>

然后将CSS简化为：

table {
        background-color: #d7d7d7;
        font-family: 'Tw Cen MT';
        border: 14px solid #ffffff;
        padding: 25px;
}

如果这是您正在寻找的造型？我希望这有助于你正在努力实现的目标。

Answer 3

解决方案：在CSS的margin-left标记中添加了text-indent和<p>的属性，并将它们与列表图标的正确缩进像素进行匹配。

th {
  background-color: #d7d7d7;
  color: white;
  font-family: 'Tw Cen MT';
  font-weight: normal;
  font-size: 24px;
  padding: 25px;
  border-style: solid;
  height: 300px;
  width: 250px;
  text-align: left;
  bottom: auto;
  right: auto;
  left: auto;
  vertical-align: top;
  border-left: 14px solid white; 
  border-right: 15px solid white;
  padding-left: 53px;
  text-indent: -33px;
  

}
 
 
 /* DO NOT CHANGE THIS PROPERTY. THIS KEEPS THE TEXT IN LINE */
 
.test { 
 margin: auto; 
 cursor:pointer;
  }


/* RESOLUTION: Added the properties of margin-left and text-indent and matched them with the indentations of list... */
p {
    margin: 0px;
    margin-left: -33px;
    padding: 0;
    text-indent: 0px;
    
}


/* Underlines the text when mouse hovers over it. */

.underline_hover:hover {
text-decoration: underline;

    
 }
 

<div>

<table> <tbody> <tr> 



<th><span class="test" style="color: black;">

<!-- Heading #1 of the Column-->
<p style="text-align: left;"><strong>Header works fine</strong></p>



<!-- Bulleted points of the Column-->
<li onclick="location.href = '#';"><span class="underline_hover">Bullet #1</span></li>

<br>

<!-- Heading #2 of the Column-->
<p style="text-align: left;"><strong>This is the header that is causing problems in smaller displays </strong></p>


<li onclick="location.href = '#';"><span class="underline_hover" >Bullet #2:
 This is a really long bullet which was causing problems in smaller displays. </span></li>


</span></th>

</tr></tbody></table>

</div>