我有一对情侣名单(姓名,价值),我想在表格中垂直对齐显示:
aaaaaaaa first_value
bbbb second_value
ccc third_value
ddd fourth_value
有没有办法在HTML / CSS中这样做,不使用表格(我想我应该以某种方式使用UL / LI标签)?
答案 0 :(得分:4)
是的。使用定义列表。
<dl>
<dt>aaa</dt>
<dd>111</dd>
<dt>bbb</dt>
<dd>222</dd>
<dt>ccc</dt>
<dd>333</dd>
</dl>
然后
<style>
dl dt { width: 100px; float: left; }
dl dd { margin-bottom: 10px; }
</style>
答案 1 :(得分:2)
对我来说这看起来像definition list:
<dl>
<dt>aaaaaaaa</dt>
<dd>first_value</dd>
<dt>bbbb</dt>
<dd>second_value</dd>
<dt>ccc</dt>
<dd>third_value</dd>
<dt>ddd</dt>
<dd>fourth_value</dd>
</dl>
一些用于设置样式的CSS位于this question。
答案 2 :(得分:1)
.name { display: inline-block; width: 100px }
如果您有表格数据,请考虑使用表格。这就是桌子的制作方式。
答案 3 :(得分:1)
你当然可以只使用CSS,但为什么不使用表呢?这是一个完全有效的用途。
那就是一个只有CSS的例子:
<ul>
<li><div>name</div><div>value</div></li>
</ul>
li {overflow: auto;}
li div {width: 50%; float: left;}
答案 4 :(得分:1)
尝试这样的事情:
<ul>
<li><span class="fixedWidth">aaaaaaaa</span>first_value
<li><span class="fixedWidth">bbbb</span>second_value
<li><span class="fixedWidth">ccc</span>third_value
<li><span class="fixedWidth">ddd</span>fourth_value
</ul>
在你的CSS添加
.fixedWidth { display: inline-block; width: 100px }
答案 5 :(得分:0)
您可以create a group of div tags拥有表格样式。
像这样创建你的html div:
<div class="div-table">
<div class="div-table-caption">This is a caption</div>
<div class="div-table-row">
<div class="div-table-col">1st Column</div>
<div class="div-table-col">2nd Column</div>
</div>
</div>
然后你可以添加CSS样式来获得你想要的外观:
.div-table{display:table; border:1px solid #003399;}
.div-table-caption{display:table-caption; background:#009999;}
.div-table-row{display:table-row;}
.div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399
查看此jsFiddle了解最终结果。
答案 6 :(得分:-1)
你可以做这样的事情
HTML
<div id="main">
<div class="row">
<p class="cell">aaaaaa</p><p class="cell">first_value</p>
</div>
<div class="row">
<p class="cell">bbbb</p><p class="cell">second_value</p>
</div>
<div class="row">
<p class="cell">ccc</p><p class="cell">third_value</p>
</div>
<div class="row">
<p class="cell">ddd</p><p class="cell">fourth_value</p>
</div>
</div>
CSS
#main{display:table;}
.row{display:table-row;}
.cell{display:table-cell; padding:10px;}