0

我有一个 div 作为标题，在它下面有一个用作帖子的表格，带有标题、正文和一个单元格和/或列，其中有箭头和一个用于赞成和反对票的计数器。我遇到的第一个问题是对齐和第二个调整列的大小

这是我的代码

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;

}

th, td {
  padding: 5px;
  text-align: left;
}

table {
  table-layout: fixed;
  margin: 0 auto;
  width: 50%;
}

#votes {
  text-align: center;
}

div {
  font-size: 25px;
  margin: auto;
  color: white;
  background-color: black;
  padding: 15px;
  width: 50% ;
  border-radius: 12px;
}
    
<div>RANDOM THINGS</div>
<table>
    <tr>
      <th id="title">Title</th>
      <th id="votes" rowspan="3">
        <img src='images/arrow_up.png' onclick='Upvote()'/>

        <br>0<br>

        <img src='images/arrow_down.png' onclick='Downvote()'/>
      </th>
    </tr>
    <tr id="textBody">
      <td rowspan="2">Text Body</td>
    </tr>
    <tr>
    </tr>
</table>

到目前为止我得到了什么

4

1 回答 1

0

您需要添加box-sizing: border-box;到 div 以便它不会扩展它的宽度以添加填充。

如果使用border-box宽度和高度属性（以及最小/最大属性）包括内容、填充和边框。

你的 CSS 最终会变成：

div {
  font-size: 25px;
  margin: auto;
  color: white;
  background-color: black;
  padding: 15px;
  width: 50% ;
  border-radius: 12px;
  box-sizing: border-box;
}

其余部分不变。在这里，您有一个展示它的 CodePen：https ://codepen.io/javierojeda/pen/LqpLVN

然而，正如@hungerstar 提到的......你不会使用桌子来做那种事情。您可能想要使用新的display: grid，display: flex甚至使用 3 个 div 和一些 CSS 来根据需要容纳它们。

欲了解更多信息：

于 2019-01-24T19:02:37.133 回答