61,112
社区成员
发帖
与我相关
我的任务
分享请教一个分散对齐的样式
一段代码
请问怎么样能够让 两个个字的 与四个字的 分散对齐呢？
如“全称” 与 “关联机关”对齐
<html>
<style>
ul{margin: 16px 0 0 16px;}
li{list-style: none;}
.left{width:35%;text-align:}
</style>
<div>
<ul>
<li><span class="left">名称：</span><span>sss</span></li>
<li><span class="left">全称：</span><span>sss</span></li>
<li><span class="left">关联机关：</span><span >琅琊区琅琊街道科室</span></li>
<li><span class="left">联系人：</span><span></span></li>
<li><span class="left">联系电话：</span><span></span></li>
<li><span class="left">地址：</span><span></span></li>
<li><span class="left">单位概况：</span></li>
</ul>
</div>
</html>
请问怎么样能够让 两个个字的 与四个字的 分散对齐呢？
如“全称” 与 “关联机关”对齐
...全文
请发表友善的回复…
发表回复
wwtbless 2011-01-15
- 打赏
- 举报
打一个空格 ，然后用样式控制。
<style>
ul{margin: 16px 0 0 16px;}
li{list-style: none; display:block;}
.left{width:35%;text-align:}
ul li span.left{ display:block; width:100px; text-align:right; float:left;}
ul li span.left.l2{word-spacing:1.3em;}
ul li span.left.l3{word-spacing:0.1px;}
</style>
<div>
<ul>
<li><span class="left l2">名 称：</span><span>sss</span></li>
<li><span class="left l2">全 称：</span><span>sss</span></li>
<li><span class="left">关联机关：</span><span >琅琊区琅琊街道科室</span></li>
<li><span class="left l3">联 系 人：</span><span>aaaaa</span></li>
<li><span class="left">联系电话：</span><span>bbbb</span></li>
<li><span class="left l2">地 址：</span><span>ccccc</span></li>
<li><span class="left">单位概况：</span><span>dddddd</span></li>
</ul>
</div>
hoojo 2011-01-14
- 打赏
- 举报
[Quote=引用楼主 sll324 的回复:]
一段代码
HTML code
<html>
<style>
ul{margin: 16px 0 0 16px;}
li{list-style: none;}
.left{width:35%;text-align:}
</style>
<div>
<ul>
<li><span class="left">名称：</span><span>sss</span></li>
<li><s……
[/Quote]
一段代码
HTML code
<html>
<style>
ul{margin: 16px 0 0 16px;}
li{list-style: none;}
.left{width:35%;text-align:}
</style>
<div>
<ul>
<li><span class="left">名称：</span><span>sss</span></li>
<li><s……
[/Quote]
用css样式控制
wszdw142 2011-01-14
- 打赏
- 举报
<style>
ul{margin: 16px 0 0 16px;}
li{list-style: none; display:block;}
.left{width:35%;text-align:}
ul li span.left{ display:block; width:100px; text-align:right; float:left;}
</style>
<div>
<ul>
<li><span class="left">名称：</span><span>sss</span></li>
<li><span class="left">全称：</span><span>sss</span></li>
<li><span class="left">关联机关：</span><span >琅琊区琅琊街道科室</span></li>
<li><span class="left">联系人：</span><span>aaaaa</span></li>
<li><span class="left">联系电话：</span><span>bbbb</span></li>
<li><span class="left">地址：</span><span>ccccc</span></li>
<li><span class="left">单位概况：</span><span>dddddd</span></li>
</ul>
</div>SLL324 2011-01-14
- 打赏
- 举报
但 很多页面 都需要 这种效果 难道没有 其它方法 ？用样式 控制？
dalmeeme 2011-01-14
- 打赏
- 举报
这个一般自己用空格分隔实现
computersinece 2011-01-14
- 打赏
- 举报
设置body字体，然后用空格控制。
