Question

我有一个标准导航，我希望中心对齐如下：

＆＃13;

body {
  background: silver;
}
nav {
  text-align: center;
  padding: 3px 0;
  margin: 5px 0 0 5px;
}
nav ul {
  list-style: none;
  margin: 0 30px;
  padding: 2px 20px 0 0;
  position: relative;
}
nav li {
  display: inline-block;
  font-size: 1.5em;
}
nav a {
  font-weight: 800;
  color: #fff;
  padding: 2px 10px 2px;
  text-transform: uppercase;
  text-decoration: none;
}
nav a:active {
  color: #00A2E0;
}
nav a {
  color: #fff;
}
nav a.selected,
nav a:hover {
  color: #23c3ff;
}

＆＃13;

<nav>
  <ul>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="resume.html">Resume</a></li>
    <li><a href="contact.html" class="selected">Contact</a></li>
  </ul>
</nav>

＆＃13;

代码适用于所有窗口大小。但是我希望导航上的另一个列表项feed，它将自身附加到与列表项的其余部分相同的行为，但是在Portfolio，about，resume和contact的右侧。所以：

投资组合关于简历联系Feed

由于我的导航设置为居中，如果我将导航添加到导航并浮动单个列表项，则导览列表将使中心与附加的输入对齐，并且将看起来偏离中心。换句话说，我仍然希望列表中的前4个项目对齐中心，Feed要浮动到右侧，还希望在屏幕大小缩小时使用列表移动Feed。

给予绝对定位在最大窗口中工作，但是当屏幕尺寸变小时，馈送最终会与其他导航元素重叠。

我也尝试过：

＆＃13;

body {
  background: silver;
}
nav {
  text-align: center;
  padding: 3px 0;
  margin: 5px 0 0 5px;
}
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.feed {
  float: right;
  right: 20px;
  z-index: 30;
}
/*
#feed{
  position: absolute;
  right: 40px;
}*/

nav ul {
  list-style: none;
  margin: 0 30px;
  padding: 2px 20px 0 0;
  position: relative;
}
nav li {
  display: inline-block;
  font-size: 1.5em;
}
nav a {
  font-weight: 800;
  color: #fff;
  padding: 2px 10px 2px;
  text-transform: uppercase;
  text-decoration: none;
}
nav a:active {
  color: #00A2E0;
}
nav a {
  color: #fff;
}
nav a.selected,
nav a:hover {
  color: #23c3ff;
}

＆＃13;

<nav class="clearfix">
  <div class="feed">
    <ul>
      <li><a href="feed.html">feed</a></li>
    </ul>
  </div>
  <ul>
    <li><a href="index.html" class="selected">Portfolio</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="resume.html">Resume</a></li>
    <li><a href="contact.html">Contact</a></li>
    <!-- <li id = "feed"><a href="feed.html">bucket feed</a></li> -->
  </ul>
</nav>

＆＃13;

并且效果最好，但与Feed关联的div只允许我在文本本身正下方的1个像素开口中单击它（看起来相关的锚链接）。其余的似乎与ul和导航器重叠，后者是覆盖＆＃39;可点击区域的其余部分。对于冗长的帖子感到抱歉，但感谢您的帮助！

Answer 1

我会使用媒体查询来执行此操作，设置合理的断点，并将absolute定位的Feed项目更改回static。

http://jsfiddle.net/3Lvj1pfc/

<nav class="clearfix">
    <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li class="feed"><a href="feed.html">Feed</a></li>
    </ul>
</nav>

nav ul {
    position: relative;
}
nav .feed {
    position: absolute;
    right: 20px;
}
@media (max-width: 800px) {
    nav .feed {
        position: static;
    }
}

body {
    background: silver;
}
.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content:"";
}
.clearfix:after {
    clear: both;
}
nav {
    text-align: center;
    padding: 3px 0;
    margin: 0;
    font-family: sans-serif;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
nav li {
    display: inline-block;
    font-size: 1.5em;
}
nav .feed {
    position: absolute;
    right: 20px;
}
nav a {
    font-weight: 800;
    color: #fff;
    padding: 2px 10px 2px;
    text-transform: uppercase;
    text-decoration: none;
}
nav a:active {
    color: #00A2E0;
}
nav a {
    color: #fff;
}
nav a.selected, nav a:hover {
    color: #23c3ff;
}
@media (max-width: 800px) {
    nav .feed {
        position: static;
    }
}

<nav class="clearfix">
    <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="resume.html">Resume</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li class="feed"><a href="feed.html">Feed</a></li>
    </ul>
</nav>

在仍然可以使用导航功能的导航上设置偏移链接

1 个答案: