带图像的css navbar

Question

我正在尝试使用CSS制作导航栏。导航链接需要与条形图中间的图片均匀间隔。目前它看起来像这样：

守则：

＆＃13;

＆＃13;

767px

＆＃13;

body {
  background-image: url("../img/bg.jpg");
  margin-left: 0px;
  margin-right: 0px;
}
div.menucontainer {
  margin-top: 50px;
  background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
  height: 35px;
  box-shadow: 0px 5px 10px #000;
  text-align: center;
}
IMG.vcmenulogo {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 10px;
}
.menulinks {
  position: relative;
  right: 0px;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
.menulinks li {
  display:inline;
}
.menulinks a {
  display:inline-block;
  padding:10px;
}
#footer {
  position: fixed; 
  background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
  box-shadow: 0px -6px 5px 0px rgba(0,0,0,0.75);
  width:100%;
  height:20;
  bottom:0;
}
P.footer {
  text-align: center;
  color: white;
  font-size: 11px;
  font-family: Arial;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您正在尝试按照我的理解在第2和第3按钮之间添加一些空格 只需给第2和第3个li元素赋予类并给出保证金。或者也许你可以在

之间添加2个ul元素和边距

Answer 2

<@> @joshua，这是一个非常有用的方法，如同@ryuk所说，如果我这样做，我只会在第二个和第三个孩子之间制作一个假li然后适当地保留它。 你可以这样做，

<ul class="menulinks"> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li class="third"><a href="/work/">Products</a></li> <li><a href="/contact/">Contact</a></li> </ul>

.third{ margin-left: 10% }

或在第2和第3 li

之间做一个假人

     <ul class="menulinks">
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li class="dummy"></li>
        <li><a href="/work/">Products</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>

.dummy{
    padding-left:10%
}

Answer 3

您可以更改HTML，将img作为li插入，然后从中删除position:absolute，并进行一些有关position值和{{1}的其他调整你有你想要的东西。

vertical-align

body {
  background-image: url("../img/bg.jpg");
  margin: 0
}
.menucontainer {
  margin-top: 50px;
  background-image: url("http://www.thevincentcollection.com/img/menubg.jpg");
  height: 35px;
  box-shadow: 0px 5px 10px #000;
  text-align: center;
}
.menulinks {
  position: relative;
  top: -90px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.menulinks li {
  display: inline-block;
  padding: 10px;
  vertical-align: middle
}