确保导航栏全宽答案

【问题标题】：Ensure nav bar is full width确保导航栏全宽
【发布时间】：2016-12-25 07:33:07
【问题描述】：

现在我正在构建一个导航栏，但我似乎无法让它达到页面的整个宽度。我尝试将边距设置为0 auto，但这不起作用。这是一个屏幕截图和当前的 CSS 和 Mockup。

截图：

如您所见，导航栏周围有一些边距，我不想再在那里了。

CSS：

 .topbar {
  background-color: $topbar-background-color;
  height: $topbar-height;
  padding: 0 10px;
  position: relative;
  text-shadow: 0 1px #fff;
}

HTML：

    <div class="topbar">
    <% if user_signed_in? %>
      <%= link_to "Sign out", destroy_user_session_path, :method => :delete, class: "button" %>
    <% else %>
      <%= link_to "Sign In", new_user_session_path, class: "button" %>
      <%= link_to "Sign Up", new_user_registration_path, class: "button" %>
    <% end %>
  </div>

小提琴：

https://jsfiddle.net/38ubnfz7/

【问题讨论】：

你能做一个小提琴吗？
您是指深色导航栏左侧的空白吗？看起来父容器或树上的某个地方有一些填充。
有没有检查body的style是否有margin:0？
是的，除了 jsfiddle 设置的 nav bar is 100% width 的正文边距之外
如果没有其他父类则将html和body的padding和margin改为0

标签： html css

【解决方案1】：

设置body margin:0后有上下边距；因为 p 元素默认得到 -webkit-margin-before: 1em; -webkit-margin-after: 1em;

所以你需要设置 .topbar p{margin:0;} UPDATE FIDDLE 我只是在 html, body 部分添加了一个红色边框，这样每个人都会清楚 topbar 和 body 部分之间没有边距。

谢谢。

html,body{
  margin:0;
 border:1px solid red;/* just make this border for the body to make sure there is no margin between body and the topnav div */
}
.topbar {
  background-color: rgb(68,68,68);
  height: 50px;
 padding: 0 10px;
  position: relative;
  text-shadow: 0 1px #fff;
}
.topbar p{
margin:0;
background-color:lightblue;
width: 10%;
text-align: center;
}

<div class="topbar">
  <p>
  sign out
  </p>
</div>

【讨论】：

【解决方案2】：

设置边距时，请记住使用速记符号（即margin: auto 0）会将第一个参数应用于顶部和底部，将第二个参数应用于左右。这与以下内容相同：

margin-top: auto;
margin-bottom: auto;
margin-right: 0;
margin-left: 0;

无论出于何种原因，css 属性都倾向于顺时针移动。

现在，如果没有小提琴，我们无法确定，但很有可能边距是从其父级继承的（右/左属性设置为auto）。看看是否只需使用margin: 0 即可修复它。如果没有，请打开开发工具并查看是否有来自父级的边距或填充。 Chrome 有一个方便的插图：

沿着节点链向上的路径，直到找到有罪的容器。

您可能还想为

指定零边距或填充

body {
  margin: 0;
  padding: 0;
}

【讨论】：

【解决方案3】：

关于小提琴，导航栏的父元素是body，默认情况下它有一个margin，所以你需要处理它。

body {
   margin:0;
}

无论您在何种情况下使用此导航栏，您都需要考虑其父元素以及它们如何影响其布局。

【讨论】：

这更像是一个评论，你有足够的代表；不能给他们解决办法吗？