css - 如何对齐第二列(和更多列)中的元素，以便变化的值(增加的字符)不会推送

Question

我有一个非常具体的问题:我正在构建一个简单的平面表格(由于圆 Angular 问题，我不使用表格本身)。

我在这里使用无序列表，问题是我不知道如何对齐第二列中的元素，考虑到内容应该是动态的(例如，改变数字)。这是一行的标记:

<section class="ktbl_head">
    <ul>
       <li>VALUE</li>
       <li>VALIDITY</li>
    </ul>
</section>
<section class="ktbl_mid_wht">
    <ul>
       <li>500 units</li>
       <li>15 days</li>
       <button class="btn btn-sm getdramz pull-right">GET</button>
    </ul>
</section>

和 CSS:

.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}

.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}

.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}

感谢您的关注!

Answer 1

这是我在没有表格标签的情况下对齐表格的实现:

HTML

<div class="container">
    <section class="ktbl_head">
    <ul>
       <li>VALUE</li>
       <li>VALIDITY</li>
    </ul>
</section>
<section class="ktbl_mid_wht">
    <ul>
       <li>500 units</li>
       <li>15 days</li>
       <button class="btn btn-sm getdramz pull-right">GET</button>
    </ul>
</section>

CSS

.container {
    border-radius: 10px;
    border: 1px solid rgb(200,200,200);
    overflow: hidden;
}

section {
  font-family: "Open Sans", sans-serif;
  width: 100%;
}

section:nth-child(2n+1) {
    background-color: #ebe7e7;
}

section ul {
  padding: 0;
  margin: 0;
  height: 65px;
}

section ul li {
  width: 45%;
  line-height: 65px;
  display: inline-block;
}

section ul li:first-child {
    padding-left: 35px;
}

结果

解释

你看，在 HTML 中，我添加了一个新的 div 作为容器来创建带有 border-radius 的圆 Angular (需要使用overflow: hidden，让内容被容器封装起来)。

对于 CSS，section 维护一般属性，例如 font-family。此外，section:nth-child(2n+1) 用于以 1st,3rd,5th,... 开头的每隔一个元素创建 background-color 元素。选择器 section ul、section ul li 和 section ul li:first-child 用于使 CSS 选择器更具语义(它使干净的代码，将来易于维护)。请参阅下面的演示代码。编码愉快!

PLAYGROUND