对齐2列文本链接
对齐2列文本链接
提问于 2010-04-24 00:57:13
我在我的代码块中有这段代码，我想要左和右两列。现在第二个在第一列下面。
<style type="text/css">
a img{border:none;}
#planninglaunchbox
{
background:#f3f8e7;
color:#1f1f1f;
font:normal 11px Arial,sans-serif;
margin:0 10px 10px 0;
overflow:hidden;
width:235px;
}
#planninglaunchbox .inner
{
padding:10px 0 10px 10px;
}
#planninglaunchbox a{color:#1f1f1f;text-decoration:none;}
#planninglaunchbox a:active,
#planninglaunchbox a:hover{text-decoration:underline;color:#579BC3;}
#planninglaunchbox h3
{
color:#1f1f1f;
font:normal 12px Georgia,serif;
margin:0 0 5px;
text-transform:lowercase;
width:215px;
}
#planninglaunchbox h4
{
font:bold 12px Arial,sans-serif;
margin:0 0 10px;
}
#planninglaunchbox ul
{
list-style:none;
margin:0 0 5px;
padding:0;
}
#planninglaunchbox ul.first{margin-right:10px;}
#planninglaunchbox ul.first,
#planninglaunchbox ul.last
{
float:left;
}
#planninglaunchbox ul li
{
background:none;
margin-bottom:5px;
padding:0;
}
#planninglaunchbox ul li img
{
margin-right:6px;
vertical-align:middle;
}
#planninglaunchbox .seeall
{
clear:both;
margin:0;
padding:0;
width:auto;
}
</style>
<div id="planninglaunchbox">
<div class="inner">
<h3> Theme</h3>
<ul class="first">
!--Some links--
</ul>
<ul class="last">
!--Some links--
</ul>
</div>
</div>回答 2
Stack Overflow用户
发布于 2010-04-24 01:02:59
对于要并排放置的元素，请使用float:left。
Stack Overflow用户
发布于 2010-04-24 01:52:49
我喜欢列表。它们也有语义含义。
<style>
ul {
width:200px;
}
ul li {
width:100px;
float:left;
}
</style>
<ul>
<li><a href="">Something</a></li>
<li><a href="">Something</a></li>
<li><a href="">Something</a></li>
<li><a href="">Something</a></li>
</ul>使用一定的间距：
<style>
ul {
width:220px;
}
ul li {
width:100px;
float:left;
margin-left:10px
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2700441
复制相关文章
相似问题
腾讯云开发者
