上一篇: 输入文本框的动态宽度(HTML) 下一篇:html – Sublime text 2：选择包...

html – 像桌子一样对齐但是用CSS？

HTML 发布时间：2022-04-14 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html – 像桌子一样对齐但是用CSS？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

是否可以像桌子一样对齐以下2行？第一行是h2,因为它是标题,其余是列表.第一列应该相当宽,但其余列可以与文本内部一样宽.列必须填充div的宽度.

<div>
<h2 class="header1">
<span class="span1">one</span>
<span class="span2">two</span>
<span class="span3">three</span>
<span class="span4">four</span>
</h2>
<ul><li>
<span class="span5">five</span>
<span class="span6">six</span>
<span class="span7">seven</span>
<span class="span8">eight</span>
</li></ul>
</div>

div {width: 500px;}
h2 span,li span {float: left; width: auto; white-space: nowrap;}

例：

解决方法

HTML

<div class="table-like">
  <div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>
  <div>
    <span>five</span>
    <span>six</span>
    <span>seven</span>
    <span>eight</span>
  </div>
</div>

CSS

.table-like {
  display: table;
  width: 500px;
}

.table-like div { 
  display: table-row;
}

.table-like div span { 
  display: table-cell;
}

/* add borders */
.table-like,.table-like div span {
  border: 1px solid black;  
}

/* bold on 1st row */
.table-like div:nth-child(1) {
  font-weight: bold;
}

jsFiddle Demo