Question

这是我的导航：

    a{
text-decoration:none;
color:black;
}
nav{
display:inline;
margin:auto;
margin-bottom:0;
padding:0;
background-color:white;
border: 1px solid white;
border-radius:12px;
}
nav > ul{
list-style-type:none;
display:inline;
}
nav > ul > li{
display:inline;
font-size: 20px;
font-weight: 200;
border:2px solid transparent;
border-bottom: 2px solid #078930;
margin-right:2%;
}

<nav>
	<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
            <ul>
               <li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
               <li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
               <li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
               <li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
            </ul>
	<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
    </nav>

~~问题是导航总是100％宽度的父标记。我无法指定宽度，因为我使用百分比和图像。那么我能做些什么导航只需要它需要的空间？~~ ul的高度低于图像。

Answer 1

正如您在评论中提到的，我认为您正在尝试垂直对齐中间img和ul元素。如果是这样，您应该将vertical-align: middle;添加到这些元素中，如下所示：

＆＃13;

a{
text-decoration:none;
color:black;
}
nav{
display:inline;
margin:auto;
margin-bottom:0;
padding:0;
background-color:white;
border: 1px solid white;
border-radius:12px;
}
nav img {
    vertical-align: middle;
}
nav > ul{
list-style-type:none;
display:inline;
vertical-align: middle;
}
nav > ul > li{
display:inline;
font-size: 20px;
font-weight: 200;
border:2px solid transparent;
border-bottom: 2px solid #078930;
margin-right:2%;
}

＆＃13;

<nav>
	<img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
            <ul>
               <li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
               <li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
               <li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
               <li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
            </ul>
	<img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>

＆＃13;

Answer 2

为什么不简单地使用Flexbox ... inline-flex使用nav而flex使用ul

a {
  text-decoration: none;
  color: black;
}

nav {
  display: inline-flex;
  margin: auto;
  margin-bottom: 0;
  padding: 0;
  background-color: white;
  border: 1px solid white;
  border-radius: 12px;
}

nav>ul {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
  align-items: center;
  background: #efefef;
}

nav>ul>li {
  font-size: 20px;
  font-weight: 200;
  border: 2px solid transparent;
  border-bottom: 2px solid #078930;
  margin: 0 5px;
}

<nav>
  <img src='http://www.gymnasium-allermoehe.de/Bilder/Frankreich/Flagge.jpg' style='width:75px;height:50px;border-radius:12px 0px 0px 12px;'>
  <ul>
    <li class='info'><a href='http://manuel03.bplaced.net/guyane/index.html'>Info</a></li>
    <li class='nature'><a href='http://manuel03.bplaced.net/guyane/nature.html'>Nature</a></li>
    <li class='cayenne'><a href='http://manuel03.bplaced.net/guyane/cayenne.html'>Cayenne</a></li>
    <li class='kourou'><a href='http://manuel03.bplaced.net/guyane/kourou.html'>Kourou</a></li>
  </ul>
  <img src='http://paradiseintheworld.com/wp-content/uploads/2012/02/french-guiana-flag.png' style='width:75px;height:50px;border-radius:0px 12px 12px 0px;'>
</nav>

为什么我的导航元素宽度为100％？

2 个答案: