我有一个非常具体的问题:我正在构建一个简单的平面表格(由于圆 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;
}
感谢您的关注!
最佳答案
这是我在没有表格标签的情况下对齐表格的实现:
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 选择器更具语义(它使干净的代码,将来易于维护)。请参阅下面的演示代码。编码愉快!
关于css - 如何对齐第二列(和更多列)中的元素,以便变化的值(增加的字符)不会推送,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25587459/