徽标和导航栏内联

时间：2017-02-07 16:44:33

标签： html css css3

我一直试图解决这个问题几个小时，但无济于事。我已经浏览了很多不同的网站以获得答案，我正在画一个空白。

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

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

任何帮助都会受到高度赞赏，并且可能会写一篇关于我出错的地方。

谢谢。

JSFiddle：https://jsfiddle.net/rLL36dz6/

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可以在小提琴上找到

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

将徽标包装在容器中：

 <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;
}

答案 2 :(得分：-1)

尝试在徽标上使用float: left并为其指定固定宽度，使其不会像默认的块级元素那样跨越容器的整个宽度：

jsfiddle proof：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。

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

相关问题
最新问题