Html 样式列表按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6585344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling List Buttons
提问by Kobojunkie
Using a list, I want to create a list of links as in the image
使用列表，我想创建图像中的链接列表
<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>
I am kind of stuck on the CSS (button) and probably the spacing between the list elements. to make the list appear in this form. Anyone with an idea of how I can tackle this please?
我有点卡在 CSS（按钮）上，可能还有列表元素之间的间距。使列表以这种形式出现。任何人都知道我该如何解决这个问题？
回答by clairesuzy
or another way is to use floats, and make the uldisplay: inline-blockto contain the floated li's
或另一种方法是使用浮动，并使uldisplay: inline-block包含浮动li的
you need to slightly change the HTML so the spanis inside the a- this is so you can hide the spanned text, but keep the image background and clickable area for the aelements, also I'd give each link a unique reference (class or ID) so the backgrounds can be applied separately.
您需要稍微更改 HTML，使其span在内部a- 这样您就可以隐藏跨区文本，但保留a元素的图像背景和可点击区域，另外我会给每个链接一个唯一的引用（类或 ID）所以背景可以单独应用。
example HTML:
示例 HTML：
<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>
you can then put the whole background on the ul and put the individual images on each link.
然后，您可以将整个背景放在 ul 上，并将单个图像放在每个链接上。
#toolbarbottom ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
width: 100%;
background: #ff0;
}
#toolbarbottom li {
float: left;
width: 80px;
height: 80px;
border: 1px solid #000; /* not required, just to show where individual links are */
}
#toolbarbottom li a { /* make link fill the li element */
display: block;
height: 80px;
}
#toolbarbottom li span { /* hide the text */
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip: rect (1px 1px 1px 1px);
}
/* couple examples of where to put individual backgrounds */
#toolbarbottom #mupdates {background: #dad;}
#toolbarbottom #mcontact {background: #0f0;}
回答by rolling stone
You should first set up your css as an external style sheet rather than hard code it into your html. (See http://www.w3.org/TR/html4/present/styles.htmlfor more on this). To add spacing between the li elements you can use the css cascade to add some bottom padding as follows:
您应该首先将您的 css 设置为外部样式表，而不是将其硬编码到您的 html 中。（有关更多信息，请参见http://www.w3.org/TR/html4/present/styles.html）。要在 li 元素之间添加间距，您可以使用 css 级联添加一些底部填充，如下所示：
#toolbarbottom ul li {
padding-bottom:4px;
}
To make the list appear inline you would use:
要使列表显示为内联，您可以使用：
#toolbarbottom ul{
list-style: none;
display: inline;
padding-left: 0;
margin-left: 0;
}
Those button look like images, so to achieve that you'd just include them within each li element:
这些按钮看起来像图像，因此您只需将它们包含在每个 li 元素中：
<li><a href="example.com"><img src="/path/to/image.jpg"></a></li>
回答by kei
fiddle: http://jsfiddle.net/YaS9J/
小提琴：http: //jsfiddle.net/YaS9J/
css
css
#toolbarbottom li {
display:inline-block;
padding:0 10px;
}
/* if you have one */
#toolbarbottom li img {
display:block;
}
