0

抱歉，我对 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;    
}

但这不是我所追求的。它只是将图像放在屏幕的中心。有人可以帮我吗？另外，有没有做这样的事情的最佳实践？

4

4 回答 4

1

这margin:0 auto就是把它放在屏幕中央的东西。您可能想要删除它，或者将它放在容器元素上而不是单独的盒子上。

您可能想要将多个框排成一行是float:left或display:inline-block。这些中的任何一个都可以工作；它们的工作方式不同，您需要了解它们的一些内容才能使布局按您想要的方式工作，但我会将这些额外的细节留给您做进一步的研究。

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

于 2013-08-09T15:57:01.717 回答
0

也许是这样的？

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;
}
于 2013-08-09T15:51:51.760 回答
0

由于您没有提供任何标记，我将使用您引用的 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容器放置在页面上您想要的任何位置。

于 2013-08-09T15:47:02.170 回答
0

如果你像我一样懒惰，你可以在or中放几个<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>a <nav>，因为它毕竟是一个导航链接列表。

于 2013-08-09T15:57:21.167 回答