确保导航栏全宽

现在我正在构建一个导航栏，我似乎无法使其达到页面的整个宽度。我尝试将保证金设置为0 auto，但这不起作用。这是一个截图和当前的CSS和样机。确保导航栏全宽

截图：

正如你可以看到有周围的导航栏，我不想再有一定的余量。

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/

来源

2016-12-24 Bitwise

ü可以创建一个小提琴？ – Jay

您是否指黑暗导航栏左侧的空格？它看起来像父容器或树上的某处有一些填充。 –

你检查过，看看身体的风格是否有余量：0？ – haltersweb

有上下页边距来后，我们设置体保证金：0;这是因为p元素默认情况下获取-webkit-margin-before：1em; -webkit-margin-after：1em;

，所以你需要设置.topbar p {保证金：0;} UPDATE FIDDLE 我只是添加HTML上红色边框，机身部分，因此，这将是大家都很清楚，有顶栏和主体部分之间没有保证金。

谢谢。

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>

来源

2016-12-24 22:01:25

-1

至于小提琴，导航栏的父元素是人体，它有默认情况下应用于此保证金，因此您需要处理该问题。

body { 
    margin:0; 
}

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

来源

2016-12-24 21:16:20 doz87

这真的是更多的评论，你有足够的代表;你能否向他们提供解决方案？ –

设置边距时，请记住，使用简写符号（即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; 
}

来源

2016-12-24 21:18:32 newswim

确保导航栏全宽

回答

相关问题