全宽导航

Question

我希望这可能是一个快速修复。我多年来一直盯着这个，我希望一双新鲜的眼睛能够立刻看到错误！

问题：

1. 底部的导航需要是页面的全宽。我希望它能够在没有边缘的情况下拉伸页面的宽度。

请注意，我只为768PX及以下版本开始编码。

http://jsfiddle.net/5e7kp/

导航

<footer class="row small-12 columns clearfix">
    <nav id="footnav">
        <ul>
            <li>
                <a href="#" title="About">About</a>
            </li>


            <li>
                <a href="#" title="Work">Work</a>
            </li>


            <li>
                <a href="#" title="Contact">Contact</a>
            </li>
        </ul>
    </nav>


    <p>&copy; 2014 hsudfapsdif</p>
</footer>

nav #footnav {
    margin: 0;
}
nav ul li {
    position:relative;
    margin-left:3.333333333333%
}

nav ul li a {
    display:block;
    text-transform:lowercase;
    padding:2em 3.333333333333%;
    padding:1.2em 6.25%;
    font-size:16px;
    background:#121314 url(../img/arrow.png) no-repeat 93.5% 50%;
    border-bottom:1px solid #222
}

nav a:link,nav a:visited {
    color:#666;
    font-weight:700;
    text-decoration:none;
    -webkit-transition:all .25s linear;
    transition:color .25s linear
}

nav a:hover,nav a:active {
    color:#ccc
}

nav ul li.current a:link,nav ul li.current a:visited,nav ul li.current a:hover,nav ul li.current a:active {
    color:#fff;
    background-color:#111
}

Answer 1

您可以尝试此代码

<强> DEMO

<div class="row small-2 columns large-2 columns clearfix btnWrap">
    <span class="btn">Read More</span> 
</div>

    body {
       margin: 0;
    }

    .btnWrap{
        text-align: right;
    }

    .btn{
       padding:10px 20px;
    }

    nav ul{
       margin: 0;
       padding: 0;
    }

    nav ul li{
       margin-left:0; // Remove the left margin
    }

Answer 2

有很多方法可以解决按钮问题。看看这两个选项......

选项1：换一个新div

<div class="align-right">
  <div class="row small-2 columns large-2 columns btn clearfix">Read More</div>
</div>

.align-right {
  text-align: right;
  padding-right: 30px;
}

选项2：添加浮动和边距

.btn {
  -webkit-border-radius:28;
  -moz-border-radius:28;
  border-radius:28px;
  color:#fff;
  font-size:12px;
  background:#00A2D2;
  padding:10px 20px;
  text-decoration:none;
  float: right;
  margin-right: 30px;
}

至于导航，如何将width: 100%;添加到#footnav？也许我不确定你究竟在问什么...

Answer 3

您是否尝试删除或编辑其CSS属性？尝试删除并用行代替它......

Answer 4

您只需要在现有标记中添加两条规则。

body {
    margin: 0;
}

nav ul {
    padding-left: 0;
}

您还在列表项上设置了左边距。删除

http://jsfiddle.net/michaelburtonray/5e7kp/3/