html – 标签左对齐

概述我这里有一个简单的html布局( in jsfiddle)： <ul> <li> <label class="name">Name1:</label> <label class="value">value1</label> </li> <li> <label class="name">Name22222:</label> 我这里有一个简单的HTML布局( in jsfiddle)：

<ul>    <li>        <label >name1:</label>        <label >value1</label>    </li>    <li>        <label >name22222:</label>        <label >value22222</label>    </li></ul>

我想留下名字&值,所以我做了以下CSS：

.name{  Font-weight: bold;  text-align: left;}.value{    text-align:left;}

但他们没有保持一致,我错在哪里？

— update–

我的意思是value1和value22222左对齐,而name1和name2222离开algin.您可以在我的jsfiddle链接中看到value1和value22222当前不在同一左对齐级别.我需要这样：

name1:        value1name22222:    value22222

解决方法 一切看起来都与我保持一致.

你偶然的意思是你想要一条线上的所有东西吗？

.name{Font-weight: bold;text-align: left;float: left;}.value{text-align:left;float:left;}

jsfiddle here

根据您对问题的编辑….唯一的方法是获得.name类的宽度.如果没有设定的宽度,.value将会立即落在.name的左边并且垂直放置,它们将不会对齐到左边.

.name{Font-weight: bold;text-align: left;display: inline-block;wIDth:100px;}

当然,为.name标签设置宽度会产生问题,因为假定.name内容的长度不同.您可以设置宽度然后添加文本溢出选项以防止布局中断…..

.name{Font-weight: bold;text-align: left;display: inline-block;wIDth:50px;white-space: nowrap;text-overflow: ellipsis;}

总结

以上是内存溢出为你收集整理的html – 标签左对齐全部内容，希望文章能够帮你解决html – 标签左对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。