Question

我是一名相对较新的CSS3学生。我尝试使用背景图像图标和块级别的文本链接来正确设置水平导航栏的样式，并且内联也是如此。另外，我也试图在悬停状态下也这样做。

这是我到目前为止所处理的内容的链接：

http://visionsic.github.io/DSW_II/test.html

＆＃13;

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 60px;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  max-height: 100px;
  max-width: 704px;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  max-height: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  position: relative;
  display: block;
  text-align: center;
  max-height: 60px;
  max-width: 60px;
  text-decoration: none;
  color: #F6EF1B;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  max-height: 60px;
  max-width: 60px;
  display: block;
  background-color: #F6EF1B;
  background-repeat: no-repeat;
  background-position: 0%;
  text-decoration: none;
  line-height: 2.5em;
  color: #004E27;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

＆＃13;

更新：

Ashwani纠正了导航栏的位置，谢谢先生！现在，我只是试图通过允许可点击的悬停链接区域填充每个按钮区域的整个块来实现状态相同。悬停宽度正确，但bg图像位于链接文本的中心。我希望它的位置就像它的正常情况一样＃34; up＆＃34;状态。

这是更新的样本：

http://visionsic.github.io/DSW_II/test.html

＆＃13;

#aside_sect_mm {
  margin: 0px;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
#aside_sect_mm nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  height: 100%;
  margin-top: 0%;
  display: block;
  position: relative;
}
#aside_sect_mm nav:after {
  content: "";
  display: table;
  clear: both;
}
#aside_sect_mm nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
#aside_sect_mm nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: relative;
  padding: 6.5% 0% 0% 0%;
  height: 100%;
  width: 100%;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon,
#aside_sect_mm nav ul li.stat_icon,
#aside_sect_mm nav ul li.img_icon,
#aside_sect_mm nav ul li.vid_icon,
#aside_sect_mm nav ul li.fut_icon {
  position: relative;
  max-height: 100%;
  max-width: 140.8px;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 40px 40px;
  display: block;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
#aside_sect_mm nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
#aside_sect_mm nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
#aside_sect_mm nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
#aside_sect_mm nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
#aside_sect_mm nav ul li.bio_icon a,
#aside_sect_mm nav ul li.stat_icon a,
#aside_sect_mm nav ul li.img_icon a,
#aside_sect_mm nav ul li.vid_icon a,
#aside_sect_mm nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover,
#aside_sect_mm nav ul li.stat_icon a:hover,
#aside_sect_mm nav ul li.img_icon a:hover,
#aside_sect_mm nav ul li.vid_icon a:hover,
#aside_sect_mm nav ul li.fut_icon a:hover {
  position: relative;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-color: #F6EF1B;
  background-position: 50% 50%;
  background-size: 40px 40px;
  text-decoration: none;
  line-height: 1.1em;
  color: #004E27;
  overflow: auto;
}
#aside_sect_mm nav ul li.bio_icon a:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
#aside_sect_mm nav ul li.stat_icon a:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
#aside_sect_mm nav ul li.img_icon a:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
#aside_sect_mm nav ul li.vid_icon a:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
#aside_sect_mm nav ul li.fut_icon a:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
  <section id="aside_sect_mm">
    <nav>
      <ul>
        <li class="bio_icon"><a href="#bio">Bio</a>
        </li>
        <li class="stat_icon"><a href="#stats">Stats</a>
        </li>
        <li class="img_icon"><a href="#images">Images</a>
        </li>
        <li class="vid_icon"><a href="#videos">Videos</a>
        </li>
        <li class="fut_icon"><a href="#future">Future</a>
      </ul>
    </nav>
  </section>

</body>

</html>

＆＃13;

Answer 1

**you can simply use the following structure for link tag**
#aside_sect_mm nav ul li a{
    position: relative;
    display: block;
    max-height: 60px;
    /*max-width: 60px; -- remove max width*/
    /*margin: 0 auto --- if you want to use max width so you should use margin o auto*/
    text-decoration: none;
    color: #F6EF1B;
}
#aside_sect_mm nav ul li a:hover{
    background-color: #f6ef1b;
    background-position: 0 center;
    background-repeat: no-repeat;
    color: #004e27;
    display: block;
    line-height: 2.5em;
    max-height: 60px;
    /*max-width: 60px; remove max-width*/
    position: relative;
    text-decoration: none;
}

Answer 2

<style type="text/css">
*{
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}
#aside_sect_mm {
    background: url("http://visionsic.github.io/DSW_II/img/mm_main_tab_c.jpg") no-repeat center center / cover;
    height: 318px;
    margin: 0;
    /*margin: 0 auto;*/ /*use this line if you want to align page horizontal  center*/
    max-width: 704px;
    position: relative;
}
#aside_sect_mm nav {
    display: block;
    position: relative;
    text-align: center;
    top: 100%;
    width: 100%;
}
#aside_sect_mm nav::after {
    clear: both;
    content: " ";
    display: table;
}
#aside_sect_mm nav ul {
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    list-style: none;
}
#aside_sect_mm .icon {
    background-color: #004e27;
    float: left;
    font-family: "Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",Helvetica,Arial,sans-serif;
    overflow: auto;
    text-align: center;
    width: 20%;
}
#aside_sect_mm .icon a{
    background-position: 50% 10%;
    background-repeat: no-repeat;
    background-size: 100px 40px;
    display: block;
    padding: 50px 0 5px 0;
    color: #fce011;
    font-weight: normal;
    text-decoration: none;
}
#aside_sect_mm .icon.bio_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/bio_ore_ylw.svg");
    background-position: 62% 10%;
}
#aside_sect_mm .icon.stat_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/stats_ore_ylw.svg");
}
#aside_sect_mm .icon.img_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/img_ore_ylw.svg");
}
#aside_sect_mm .icon.vid_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/vids_ore_ylw.svg");
}
#aside_sect_mm .icon.fut_icon a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/fut_ore_ylw.svg");
}
#aside_sect_mm .icon.bio_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/bio_ore_grn.svg");
}
#aside_sect_mm .icon.stat_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/stats_ore_grn.svg");
}
#aside_sect_mm .icon.img_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/img_ore_grn.svg");
}
#aside_sect_mm .icon.vid_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/vids_ore_grn.svg");
}
#aside_sect_mm .icon.fut_icon:hover a{
    background-image: url("http://visionsic.github.io/DSW_II/svg/fut_ore_grn.svg");
}
#aside_sect_mm .icon:hover a {
    background-color: #f6ef1b;
    color: #004e27;
    -moz-transition: background-color 1s ease 0s;
  -webkit-transition: background-color 1s ease 0s;
          transition: background-color 1s ease 0s;
}
</style> 
<section id="aside_sect_mm">
    <nav>
        <ul>
            <li class="bio_icon icon"><a href="#bio">Bio</a></li>
            <li class="stat_icon icon"><a href="#stats">Stats</a></li>
            <li class="img_icon icon"><a href="#images">Images</a></li>
            <li class="vid_icon icon"><a href="#videos">Videos</a></li>
            <li class="fut_icon icon"><a href="#future">Future</a></li>
        </ul>
    </nav>
</section>

背景图片和文字水平导航栏

2 个答案: