内嵌徽标和导航栏答案

【问题标题】：Logo and Navigation Bar inline内嵌徽标和导航栏
【发布时间】：2017-02-08 17:37:53
【问题描述】：

我已经尝试解决这个问题几个小时了，但无济于事。我浏览了许多不同的网站来寻找答案，但我还是一片空白。

我基本上是在尝试将徽标和导航栏链接（菜单）排成一行，以便它们排成一行。导航栏链接应与徽标垂直居中。

我可以通过设置精确的像素等手动完成，但显然这并没有多大用处。我也尝试过将徽标作为 li 元素，或者它是自己的单独 div，但我似乎无法让它工作。

我们将不胜感激任何帮助，以及关于我哪里出错的文章。

谢谢。

HTML

    <img class="logo" src="http://i.imgur.com/z38lrml.png" border="0 "width="7%"/>

    <ul class="nav_bar_links_ul">

        <li class="dropdown menulinks">
            <a href="#" class="dropbtn">Games</a>
            <div class="dropdown-content">
                <a href="#">Game 1</a>
            </div>
        </li>

        <li class="dropdown menulinks">
            <a href="#" class="dropbtn">Websites</a>
            <div class="dropdown-content">
                <a href="#">Website 1</a>
                <a href="#">Website 2</a>
            </div>
        </li>

        <li class="dropdown menulinks">
            <a href="#">About</a>
            <div class="dropdown-content">
                <a href="#">Meet the Team</a>
                <a href="#">About 2</a>
            </div>
        </li>

        <li class="twi">
            <a href="#"><img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" /></a>
        </li>
        <li class="twi">
            <a href="#"><img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" /></a>
        </li>
    </ul>       
</div>

CSS 可以在 fiddle 上找到

【问题讨论】：

标签： html css

【解决方案1】：

借助flexbox 的魔力，我们只需几行代码就可以实现这样的目标。

是这个还是你需要再调整一下？

.nav_bar {
  margin: 0 auto;
  margin-top: 6px;
  margin-bottom: 6px;
  background-color: #00021a;
  width: 960px;
}
/* ALL NAVBAR GOES BELOW */

.all_navigation li {
  list-style: none;
  display: inline-block;
}
.all_navigation{
  display: flex;
  height: 60px;
  align-items: center;
}
.nav_bar_links_ul{
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav_bar_links_ul li {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
}
.nav_bar_links_ul li,
a {
  text-decoration: none;
  color: white;
}
.nav_bar_links_ul li,
a:hover {
  color: #2E9AFE;
}
.nav_bar_links_ul .menulinks li {
  margin-left: 40px;
}
.nav_bar_links_ul .twi {
  display: inline;
}
.menulinks {
  margin-left: 40px;
}
.twi:hover {
  color: #2E9AFE;
}
/* NAVIGATION DROP DOWN */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1;
  color: #2E9AFE;
}
.dropdown:hover .dropdown-content {
  display: block;
}

<div class="nav_bar">
  <div class="all_navigation">

    <img class="logo" src="http://i.imgur.com/z38lrml.png" border="0" width="60" height="auto" />

    <ul class="nav_bar_links_ul">

      <li class="dropdown menulinks">
        <a href="#" class="dropbtn">Games</a>
        <div class="dropdown-content">
          <a href="#">Game 1</a>
        </div>
      </li>

      <li class="dropdown menulinks">
        <a href="#" class="dropbtn">Websites</a>
        <div class="dropdown-content">
          <a href="#">Website 1</a>
          <a href="#">Website 2</a>
        </div>
      </li>

      <li class="dropdown menulinks">
        <a href="#">About</a>
        <div class="dropdown-content">
          <a href="#">Meet the Team</a>
          <a href="#">About 2</a>
        </div>
      </li>

      <li class="twi">
        <a href="#">
          <img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" />
        </a>
      </li>
      <li class="twi">
        <a href="#">
          <img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" />
        </a>
      </li>
    </ul>
  </div>
</div>

【讨论】：

这并没有真正使元素垂直居中。增加.all_navigation的高度，你会看到菜单项停留在顶部，并且logo被拉长了。
这基本上是我想要的，但是它不能被拉伸，并且应该适用于不同分辨率的屏幕。这基本上就是我希望它看起来的样子link
更新了 sn-p。
这基本上就是我想要的。在页面缩放等方面是动态的吗？不确定这是否有意义
应该是，这取决于你的其余风格。 Flexbox 是下一个版本的 Bootstrap 所基于的机制。

【解决方案2】：

将您的徽标包装在一个容器中：

 <div class="logo">
      <img class="logo" src="http://i.imgur.com/z38lrml.png" />
 </div>

将其设置为display: inline-block 和vertical-align: middle。

还要确保图片适合容器。

.logo {
  display: inline-block;
  vertical-align: middle;
  width: 7%;
}

.logo img {
  height: auto;
  width: 100%;
}

将您的导航包裹在一个容器中；

<div class="nav">
  <ul class="nav_bar_links_ul">
    ...
  </ul>
</div>

也将此设置为display: inline-block 和vertical-align: middle。

给它一个小于图像的宽度，以便它可以放在容器中。

.nav {
  display: inline-block;
  vertical-align: middle;
  width: 90%;
}

JSFIDDLE

如果您选择将菜单向右对齐，则可以添加

.nav {
  text-align: right;
}

【讨论】：

这正是我所追求的。非常感谢，下次我也可以确切地看到我做错了什么。我会给你一个 +rep 或其他什么，但我对 stackoverflow 有点陌生，所以会调查一下！
很高兴它有帮助。

【解决方案3】：

尝试在 logo 上使用float: left 并给它一个固定的宽度，这样它就不会像默认的块级元素那样跨越容器的整个宽度：

jsfiddle 证明：https://jsfiddle.net/rLL36dz6/15/

非 jsfiddle 证明：

.nav_bar {
	margin: 0 auto;
	margin-top: 6px;
	margin-bottom: 6px;
	background-color: #00021a;
	width: 960px;
}

/* ALL NAVBAR GOES BELOW */

.all_navigation li {
	list-style: none;
	display: inline-block;
}

.nav_bar_links_ul li {
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 600;
}

.nav_bar_links_ul li, a {
	text-decoration: none;
	color: white;
}

.nav_bar_links_ul li, a:hover {
	color: #2E9AFE;
}

.nav_bar_links_ul .menulinks li {	
	margin-left: 40px;
}

.nav_bar_links_ul .twi {
	display: inline;
}

.menulinks {
	margin-left: 40px;
}

.twi:hover {
	color: #2E9AFE;
}

/* NAVIGATION DROP DOWN */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
	min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
	background-color: #f1f1f1;
	color: #2E9AFE;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* new */
.nav_bar {
  float: left;
}
.logo {
  float: left;
}

<div class="nav_bar">		
	<div class="all_navigation">
		
		<img class="logo" src="http://i.imgur.com/z38lrml.png" border="0 "width="7%"/>
		
		<ul class="nav_bar_links_ul">
			
			<li class="dropdown menulinks">
				<a href="#" class="dropbtn">Games</a>
				<div class="dropdown-content">
					<a href="#">Game 1</a>
				</div>
			</li>
				
			<li class="dropdown menulinks">
				<a href="#" class="dropbtn">Websites</a>
				<div class="dropdown-content">
					<a href="#">Website 1</a>
					<a href="#">Website 2</a>
				</div>
			</li>
				
			<li class="dropdown menulinks">
				<a href="#">About</a>
				<div class="dropdown-content">
					<a href="#">Meet the Team</a>
					<a href="#">About 2</a>
				</div>
			</li>
			
			<li class="twi">
				<a href="#"><img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" /></a>
			</li>
			<li class="twi">
				<a href="#"><img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" /></a>
			</li>
		</ul>		
	</div>
</div>

您也可以简单地将徽标放入ul>li 并使其成为inline-block 或inline。

您需要设置填充或垂直对齐以水平居中。我还不能详细解释。明天可以进一步澄清。

【讨论】：

我确实尝试了将整个图像向左浮动，并修复了宽度但导致了一些问题。主要是标志不再可见，（不再在导航栏中）