css 如何更好地对齐这些元素?

ilmyapht  于 2023-02-14  发布在  其他
关注(0)|答案(1)|浏览(130)

我目前正在重新制作我访问的论坛,我在保持这些元素对齐方面遇到了问题。我希望每个主题与 * 主题 * 对齐,每个用户名与 * 创建者 * 对齐,从代码片段中可以看到,我手动设置了每个li的填充,但是当我对第二个li使用相同的类名时,情况完全不同。我有麻烦弄清楚正确的方法,使它的每一个元素都包含在内,它不要紧有多长的每一行文字,它将保持对齐。请咨询。

.forum__main-board {
  background-color: #28398a;
  border: 1px solid #28398a;
  width: 87%;
  margin-top: 5px;
  padding: 3px;
}

.forum__main-board span {
  color: #fff;
  padding: 0 10px;
}

.forum__main-topic {
  padding: 5px 10px;
}

.forum__right {
  float: right;
}

.forum__msg {
  color: black !important;
}

.forum__cb {
  margin-right: 5vw;
}

.forum__lp {
  margin-right: 20px;
}

.forum__new-topic ul {
  margin: 0;
  padding: 0;
}

.forum__new-topic li {
  display: inline;
  color: #3449b2;
  text-decoration: none;
  list-style: none;
  margin: 0;
}

.forum__topic {
  padding-left: 4px;
}

.forum__creator {
  padding-left: 531px;
}

.forum__msg {
  padding-left: 137px;
}

.forum__time {
  padding-left: 40px;
}
<div class="forum__main-board">
            <span>Topic</span>
            <span class="forum__right forum__lp">Last Post</span>
            <span class="forum__right">Msgs</span>
            <span class="forum__right forum__cb">Created By</span>
          </div>
          <div class="forum__main-topic">
            <div class="forum__new-topic">
              <ul>
                <li class="forum__topic">
                  Skipping the opening is not the way to go
                </li>
                <li class="forum__creator">kant69</li>
                <li class="forum__msg">10</li>
                <li class="forum__time">2/13 1:09PM</li>
              </ul>
            </div>

            <div class="forum__new-topic">
              <ul>
                <li class="forum__topic">This is a test</li>
                <li class="forum__creator">kant69</li>
                <li class="forum__msg">10</li>
                <li class="forum__time">2/13 1:09PM</li>
              </ul>
            </div>
          </div>
dgtucam1

dgtucam11#

使用table元素来按行和列排列数据应该更容易:

.forum__msg {
  color: black !important;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: #28398a;
  border: 1px solid #28398a;
  color: white;
  font-weight: normal;
  text-align: left;
}

td {
  color: #3449b2;
}
<table>
  <thead>
    <tr>
      <th>Topic</th>
      <th>Created By</th>
      <th>Msgs</th>
      <th>Last Post</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Skipping the opening is not the way to go</td>
      <td>kant69</td>
      <td class="forum__msg">10</td>
      <td>2/13 1:09PM</td>
    </tr>
    <tr>
      <td>This is a test</td>
      <td>kant69</td>
      <td class="forum__msg">10</td>
      <td>2/13 1:09PM</td>
    </tr>
  </tbody>
</table>

相关问题