在导航中操作两个 div答案

【问题标题】：Manipulating Two Divs Within a Nav在导航中操作两个 div
【发布时间】：2014-08-15 08:00:14
【问题描述】：

我有一个“Nav Div”，里面有两个 Div。 Div #1 是一个链接 div，它将您带到我网站的其他部分，Div #2 是“社交”div，因此有电子邮件、linkedin 和 github 的图标。我已将 Div #2 浮动到右侧，因为我希望它们位于导航的右侧。 Div#2 我想以“导航”为中心。我的问题是，在将社交 div 向右浮动后，当我将链接 div 居中时，它不再显示在中间，因为社交 div 占据了右侧的空间。在不考虑社交 div 宽度的情况下，我想不出一种将链接 div 居中在导航 div 内的好方法。

 <div id="nav">
    <div id='links'>
      <td><a href="index.html"> Home</a></td>
      <td><a href="#"> Projects</a></td>
      <td><a href='blog-posts/blog.html'>Blog Posts</a></td>
    </div>
    <div id="social">  
      <td class='social'><a href="mailto:tombrightbill@gmail.com"><img id='email' src='images/email.png'/></a></td>
      <td class='social'><a href="http://www.linkedin.com/pub/tom-brightbill/32/559/a98/"><img id='linkedin' src='images/linkedin.png'/></a></td>
      <td class='social'><a href="https://github.com/tombrightbill"><img id='github' src='images/github.png'/></a></td>
    </div>
  </div>

CSS：

#social{
float:right;
display:inline-block;
padding-right:10px;
vertical-align: center;
border-left: 2px solid white;}
#links{
display:inline-block;}
#nav{
background-color:#003300;
width:100%;
text-align:center;
padding-top:15px;
padding-bottom:15px;
font-family: 'Lato', sans-serif;
position:relative;}

我们将不胜感激朝着正确的方向前进。谢谢。

【问题讨论】：

当您浮动 div#social 时，它应该出现在 HTML 上的 div#links 之前。还可以尝试从#nav 中删除text-align: center 并将margin: 0 auto 添加到#links。

标签： html header nav division

【解决方案1】：

首先，我删除了td 元素——它们存在的目的是什么？

其次，我将position: absolute 设置为#social 并通过添加right: 0 使其粘到右侧：

http://jsfiddle.net/4sf8bnmm/

只需确保检查最小屏幕宽度直到#link 和#social 重叠，然后设置@meadia 查询以重新排列导航。

【讨论】：