Question

我有一个带有两个Divs Inside的'Nav Div'。 Div＃1是一个链接div，它带你到我网站的其他部分，Div＃2是'social'div，所以有电子邮件，linkedin和github的图标。我已将Div＃2向右移动，因为我希望它们位于导航的右侧。 Div＃2我希望在'Nav'中居中。我的问题是，在将社交div向右移动之后，当我将链接div置于中心时，它不再显示在中间，因为社交div占用了右边的空间。我想不出一个很好的方法来将nav 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;}

非常感谢向正确的方向发展。谢谢。

Answer 1

首先，我删除了td元素 - 出于什么目的？

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

http://jsfiddle.net/4sf8bnmm/

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

在导航中操纵两个分区

1 个答案: