我想在页面上的导航栏中央放置一个图像。这是我想要的结果(示例):

html - 导航栏中间的图像-LMLPHP

如何使其工作(没有引导程序)。

现在,我的代码如下所示:

<nav class="navigation">
            <ul class="navigation-list-1">
                <li class="navigation-list-item"><a href="#home">Home</a></li>
                <li class="navigation-list-item"><a href="#features">Features</a></li>
                <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
                <li class="navigation-list-item"><img class="logo" src="assets/LOGO.png"></li>
                <li class="navigation-list-item"><a href="#form">Form</a></li>
                <li class="navigation-list-item"><a href="#team">Team</a></li>
                <li class="navigation-list-item"><a href="#contact">Contact</a></li>
            </ul>
        </nav>


和样式:

.navigation-list-item {
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: bold;
padding: 15px;
border-top: 10px solid white;
margin-right: -5px;

}

.logo {
max-height: 5%;
max-width: 15px;
background: cornflowerblue;
border: 5px solid cornflowerblue;

}


但这看起来很糟糕,无法正常工作……也许是将两个导航栏(左右)放入主导航栏容器的更好方法?

最佳答案

使用Flexbox


  但是,仅当您的孩子数量奇数并且图像必须在中间时,它才起作用。


为了使其响应,您应该使用%vw(视图宽度)

查看示例,在该示例中我使用了vw,并且还删除了边距以将其粘贴到顶部。


  仅供参考-触发器是onclick,因此在加载图片时点击图片;)




function big() {
  var w = 5;
  var foo = setInterval(function() {
    if (w > 15) clearInterval(foo)
    w = w + 1;
    document.getElementById('logo').style.width = w + 'vw';

  }, 100);
}

.logo {
  width: 2vw;
  background: cornflowerblue;
  border: 5px solid cornflowerblue;
}

.outer {
  display: flex;
}

.outer>p {
  flex: 1;
  height: 70px;
  line-height: 70px;
  background: blue;
}

.outer>p>a {
  text-decoration: none;
  color: white;
}

.outer>p .logo {
  flex: 1;
}

p {
  text-align: center;
  margin: 0px;
}

body {
  margin: 0px;
}

<nav class="navigation">
  <div class="outer">
    <p class="navigation-list-item"><a href="#home">Home</a></p>
    <p class="navigation-list-item"><a href="#features">Features</a></p>
    <p class="navigation-list-item"><a href="#add-info">Add info</a></p>

    <p class="navigation-list-item"><img class="logo" id="logo" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" onclick="big()"></p>
    <p class="navigation-list-item"><a href="#form">Form</a></p>
    <p class="navigation-list-item"><a href="#team">Team</a></p>
    <p class="navigation-list-item"><a href="#contact">Contact</a></p>
  </div>
</nav>





无序列表<ul>的示例

刚刚在<ul>中添加了flex属性



.navigation-list-item {
list-style: none;
font-size: 15px;
font-weight: bold;
}

.logo {
  position:absolute;

width: 10vw;
left:calc(50% - (10vw/2) - (10px/2));
background: cornflowerblue;
border: 5px solid cornflowerblue;
}

ul{
  display:flex;
  margin-left:-40px;

}
li{
  flex:1;
  background:yellow;
  border:1px solid green;
  height:70px;
  line-height:70px;
  text-align:center;
}

li>a{
  text-decoration:none;
}

<nav class="navigation">
  <ul class="navigation-list-1">
    <li class="navigation-list-item"><a href="#home">Home</a></li>
    <li class="navigation-list-item"><a href="#features">Features</a></li>
    <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
    <li class="navigation-list-item"><img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"></li>
    <li class="navigation-list-item"><a href="#form">Form</a></li>
    <li class="navigation-list-item"><a href="#team">Team</a></li>
    <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>
</nav>

10-01 17:53
查看更多