Question

对不起，我是HTML5和CSS3的新手，我的搜索没有发现任何东西，我确信这是一个非常基本的东西。我要做的是为我的网站创建一行可点击的图像/链接。就像堆栈溢出有问题一样，标签用户链接上面。

到目前为止，我的CSS看起来如下：

a#header { 
    display:block;
    margin: 0px auto;
    padding: 0px 15px 0px 15px;
    border: none;
    background: url('img url') no-repeat bottom;
    width: 50px;
    height: 100px;    
}

但这并不是我所追求的。它只是将图像放在屏幕的中央。有人可以帮帮我吗？这样做有什么最好的做法吗？

Answer 1

margin:0 auto是将它置于屏幕中心的原因。您可能希望删除它，或将其放在容器元素而不是单个框上。

您可能希望将多个方框放在一行中float:left或display:inline-block。这些都可以起作用;它们的工作方式不同，为了让布局按照你想要的方式工作，你需要了解它们，但我会留下那些额外的细节供你进一步研究。

值得注意的是，您引用的所有代码都不是特定于HTML5或CSS3的 - 它是所有基本的HTML / CSS语法已经存在了很长时间。

Answer 2

由于您没有提供任何标记，我将使用您引用的stackoverflow示例：

<div class="nav mainnavs ">
    <ul>
        <li class="youarehere"><a href="/questions" id="nav-questions">Questions</a></li>
        <li><a href="/tags" id="nav-tags">Tags</a></li>
        <li><a href="/users" id="nav-users">Users</a></li>
        <li><a href="/help/badges" id="nav-badges">Badges</a></li>
        <li><a href="/unanswered" id="nav-unanswered">Unanswered</a></li>
    </ul>
</div>

虽然您可以使用自己的div来执行此标记，但这是表示导航列表的最具语义和简洁的方法。

要按照您希望的方式设置此列表的样式，您只需应用以下样式：

.nav ul {
    list-style-type: none;
}

.nav li {
    display: block;
    float: left;
}

.nav a {
    display: block;
    padding: 6px 12px;
    /* Any other styles to disable text decoration, etc. */
}

然后将.nav容器放在页面上任意位置。

Answer 3

也许是这样的？

http://jsfiddle.net/MRayW/6/

<nav>
    <ul>
        <li><a href="#" id="header_0">a</a></li>
        <li><a href="#" id="header_1">b</a></li>
        <li><a href="#" id="header_2">c</a></li>
        <li><a href="#" id="header_3">d</a></li>
        <li><a href="#" id="header_4">e</a></li>
        <li><a href="#" id="header_5">f</a></li>
        <li><a href="#" id="header_6">g</a></li>
    </ul>
</nav>

a[id^='header_'] {
    border: none;
    background: url('xxx.jpg') no-repeat bottom;
    width: 50px;
    height: 50px;
    text-align:center;
    color:red;
    list-style:none;
    float:left;
    margin:5px;
}

ul {
    padding:0px;
    margin:0px;
    background-color:#EDEDED;
    list-style:none;
    background: none repeat scroll 0 0 red;
    height: 60px;
    margin: auto;
    width: 420px;
}

nav {
    margin:0 auto
    width:500px;
}

Answer 4

如果您像我一样懒惰，可以在<a>或<header>中添加几个<nav>代码，然后使用display: inline-block。

http://jsbin.com/ivevey/3/edit

HTML

<header>
  <a href></a>
  <a href></a>
  <a href></a>
  <a href></a>
  <a href></a>
</header>

CSS

header {
  text-align: center;
}

header > a { /* assuming a <header> contains your <a> tags */
    display: inline-block; /* make sure every image/link is treated like text, ltr */

    width: 15px; /* width/height or padding. either works */
    height: 15px; 

    background-color: red; /* This should work for a 15px x 15px image instead */
}

请注意链接之间的空间。那些是空白字符。我通常使用header {font-size: 0;}来清除它。

理想情况下，我的结构中<ul>中有<nav>，因为它毕竟是导航链接列表。

使用CSS3和＆amp ;;将图像排成一排。最佳做法

4 个答案: