样式列表按钮

Question

使用列表，我想创建一个链接列表，如图像

<div id="toolbarbottom" class="toolbar" style="position: fixed; clear: both; overflow: visible; bottom: 0px; left: 0px; width: 100%;">
     <ul>
         <li id="active"><span><a id="current" href="#add" class="button">News</a></span></li>
         <li><span> <a href="#Updates" class="button">Updates</a></span> </li>
         <li><span><a href="#Contact" class="button">Contact Us</a></span></li>
         <li><span><a href="#Website" class="button">Website</a> </span></li>
         <li><span><a href="#Refresh" id="#Refresh" class="button">Refresh</a></span> </li>
     </ul>
</div>

我有点卡在CSS（按钮）上，可能是列表元素之间的间距。使列表显示在此表单中。有谁知道如何解决这个问题呢？

Answer 1

或其他方式是使用浮点数，并使ul display: inline-block包含浮动的li

您需要稍微更改HTML，以便span位于a内 - 这样您就可以隐藏跨区文本，但保留{{1}的图片背景和可点击区域我也给每个链接一个唯一的引用（类或ID），因此背景可以单独应用。

示例HTML：

a

然后，您可以将整个背景放在ul上，并将各个图像放在每个链接上。

<div id="toolbarbottom" class="toolbar" style="position: fixed; top: 0px; left: 0px; width: 100%;">
     <ul>
         <li class="active"><a href="#add" id="madd"><span>News</span></a></li>
         <li><a href="#Updates" id="mupdates"><span> Updates</span></a></li>
         <li><a href="#Contact" id="mcontact"><span>Contact Us</span></a></li>
         <li><a href="#Website" id="mwebsite"><span>Website </span></a></li>
         <li><a href="#Refresh" id="mrefresh"><span>Refresh</span></a> </li>
     </ul>
</div>

Answer 2

首先应将css设置为外部样式表，而不是将其硬编码到html中。 （有关详细信息，请参阅http://www.w3.org/TR/html4/present/styles.html）。要在li元素之间添加间距，可以使用css级联添加一些底部填充，如下所示：

#toolbarbottom ul li {
    padding-bottom:4px;
}

要使列表以内联方式显示，您可以使用：

#toolbarbottom ul{
    list-style: none;
    display: inline;
    padding-left: 0;
    margin-left: 0;
}

这些按钮看起来像图像，所以为了实现这一点，你只需将它们包含在每个li元素中：

<li><a href="example.com"><img src="/path/to/image.jpg"></a></li>

Answer 3

小提琴：http://jsfiddle.net/YaS9J/

<强> CSS

#toolbarbottom li {
    display:inline-block;
    padding:0 10px;  
}

/* if you have one */
#toolbarbottom li img {
    display:block;   
}