Question

这是我的.html文件

<body>
  <header>
    <a href="#"><img src="header_home.png" alt="logo" width="250"></a>
    <nav>
    <ul>
      <li><img src="header_manual.png" alt="logo" width="20">Manuals</li>
      <li><img src="header_news.png" alt="logo" width="20">News</li>
    </ul>
    </nav>
  </header>
</body>

这是我的css文件：

html, body {
   height: 100%;
   margin: 0;
 }


header {
 background-color: black;
 width: 100%;
 height: 100px;
 color:red;
}

header a img {
 position: absolute;
 top: 20px;
 left: 5px;
}

header nav {
 width: 60%;
 height: 100px;
 border: red 1px solid;
 margin: 0 auto;
 text-align:center;
}

header nav ul {
  padding-left: 0;
}
header nav ul li {
 display:inline-block;
 height: 100px;
 width: 150px ;
}

现在，我在nav标签中带有文字的每个图标都是内联的。如何将图标与文本垂直并使其可链接？我想要的是每个文本上面的图标和每个块的中间然后使其可链接。

Answer 1

将锚标记中的图标包裹起来，使其可以点击。

<li><a href="#"><img src="header_manual.png" alt="logo" width="20">Manuals</a></li>

将header a img声明修改为header > a > img以在导航部分排除img（仅定位徽标）。

header > a > img {
 position: absolute;
 top: 20px;
 left: 5px;
}

然后居中图标和文字

header nav img {
    display:block;
    margin:0 auto;
}

小提琴here。

Answer 2

html, body {
   height: 100%;
   margin: 0;
 }

header {
 background-color: black;
 width: 100%;
 height: 100px;
 color:red;
}

header > a img {
 position: absolute;
 top: 20px;
 left: 5px;
}

header nav {
 width: 60%;
 height: 100px;
 border: red 1px solid;
 margin: 0 auto;
 text-align:center;
}

header nav ul {
  padding-left: 0;
margin: 0;
}
header nav ul li {
 float: left;
 height: 100px;
list-style: none;
 width: 150px ;
text-align: center;
}
nav li img{
display: block;
margin: 20px auto 0;
}

<header>
<a href="#"><img src="header_home.png" alt="logo" width="250"></a>
<nav>
<ul>
  <li><a href=""><img src="header_manual.png" alt="logo" width="20">Manuals</a></li>
  <li><a href=""><img src="header_news.png" alt="logo" width="20">News</a></li>
</ul>
</nav>
  </header>

Answer 3

使用:before或:after

＆＃13;

html, body {
    height: 100%;
    margin: 0;
}
header {
    background-color: black;
    width: 100%;
    height: 100px;
    color:red;
}
header > a > img {
    position: absolute;
    top: 20px;
    left: 5px;
}
header nav {
    width: 60%;
    height: 100px;
    border: red 1px solid;
    margin: 0 auto;
    text-align:center;
}
header nav ul {
    padding-left: 0;
}
header nav ul li {
    display:inline-block;
    vertical-align: top;
    height: 100px;
    width: 150px;
}
header nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    position: relative;
}
header nav ul li a:before {
    content:'';
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto 5px auto;
    background: #f00;
}
header nav ul li:nth-child(1) a:before {
    background: #ccc url('header_manual.png') no-repeat 0 0;
}
header nav ul li:nth-child(2) a:before {
    background: #00f url('header_news.png') no-repeat 0 0;
}
header nav ul li a:hover {
    color: #f00;
}
header nav ul li a:hover:before {
    background: #f00;
}

＆＃13;

<header> <a href="#"><img src="header_home.png" alt="logo" width="250" /></a>

    <nav>
        <ul>
            <li>
                <a href="#">Manuals</a>
            </li><li> 
                <a href="#">News</a>
            </li>
        </ul>
    </nav>
</header>

＆＃13;

如何将图标与文本垂直并使其可链接？

3 个答案: