html - Margin-Right 不会呈现

Question

我正在使用 Rails 和 Twitter Bootstrap 。出于某种原因，我可以在左边设置 10% 的边距，但我不能在右边也这样做。坦率地说，我很尴尬地问这个问题，但我希望它与 twitter bootstrap 的导入有关。一下子完成了很多工作。

这是我的 HTML

<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container2">
  <div id="logowrap">
  <%= link_to image_tag("/images/doghouse.png"), root_path %>
  <% if signed_in? %>
  </div>
  <div id="searchcontainer">
  <div id="search">
  <%= form_tag("/shirts", method: "get") do %>
  <%= text_field_tag(:q) %>
  </div>
   <div class="searchsubmit">
   <%= submit_tag("Search") %>
  </div>
   </div>
<% end %>
<% end %>
    <div id="patnav">
      <ul>
      <% if signed_in? %>
        <li><%= link_to "Users", users_path %></li>
        <li id="fat-menu" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Account <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><%= link_to "Profile", current_user %></li>
            <li><%= link_to "Settings", edit_user_path(current_user) %></li>
            <li class="divider"></li>
            <li>
              <%= link_to "Sign out", signout_path, method: "delete" %>
            </li>
          </ul>
        </li>
      <% else %>
        <li><%= link_to "Sign in", signin_path %></li>
      <% end %>
    </ul>
  </div>
</div>

这是我的 CSS

    #logowrap {
  float: left;
  width:250px;
  height:50px;
}
.container2 {
  height:50px;
  width:100%;
  margin-left:10%;
  margin-right: 10%;

}
.navbar {
  width:100%;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

#patnav {
  float:left;
    height:50px;
    display:inline;}
      ul 
      {float:right;
        height:50px;
        width:100%;}
      li {
      display: inline;
}
#searchcontainer {
  width:350px;
  height:30px;
  float:left;
  margin-top:12px;
}
#search {
  height:33px;
  width: 200px; 
   input  {width: 200px;
    line-height:21px;
    border-radius: 10px 0px 0px 10px;
  }
  float:left;
}
.searchsubmit {
height: 30px;
width: 100px; 

overflow:visible;
float:left;
input {border-radius: 0px 10px 10px 0px;
background-color:#ffc18f;}
}

Answer 1

如果 .container2 的水平边距为 10% 和 10%(总计 20%)，你需要 .container2 的宽度为 80% jsfiddle.net/dYpk3 ....边距是对象宽度的一部分