Question

我正在使用960网格框架进行原型设计。我的水平菜单左右有10px的边距。我知道这是因为我把它放在container_12包装中，但我想让它以整页宽度拉伸。这是代码所以：

<div id="wraper" class="container_12">
    <header id="masthead">
        <div id="site-brand">
            <h1><a href="#">فنان ويب</a></h1>
        </div><!-- =end site-brand-->
        <div id="search-box">
            <form class="form-wrapper cf">
              <button type="submit">بحث</button>
              <input type="text" placeholder="ابحث في الموقع" required title="أدخل كلمة البحث">
            </form>   
        </div><!-- =end search-box-->
        <nav id="main-nav">
            <ul>
                <li><a href="#">الرئسية</a></li>
                <li><a href="#">دروس</a></li>
                <li><a href="#">دورات</a></li>
                <li><a href="#">عن الموقع</a></li>
                <li><a href="#">من أنا؟</a></li>
            </ul>
        </nav>
    </header>

的CSS：

  #main-nav{
  background:#fff;
  float:right;
  width:100%;
  border-radius: 1px;
    }

 #main-nav ul{
list-style-type:none;
margin:0;
padding:0;
 } 

#main-nav li{
 display:inline;
 float:right;
padding:10px 22px 10px 30px;
text-align: center;
border-left: 1px #DADADA dotted;
}
#main-nav>ul>li:last-child {
    border:none;
}

#main-nav a{
  color:#000000;
  text-decoration: none;
  display:block;
    }

#main-nav li:hover{
  color:#ffffff;
  background:#de4062;

}

#main-nav a:hover{
  color:#ffffff;
  display:block;
}

Answer 1

尝试以下代码

#main-nav{
margin-left: 0;
margin-right: 0;
}

还将其父级的填充设置为0，如padding: 0;

从我的水平菜单中删除左右边距

1 个答案: