Question

我正在尝试制作三个＆＃34;标签＆＃34;填充较大的容器div的整个宽度，但宽度总是短几个像素，或者如果我增加选项卡的宽度，最后一个被推到较低的水平。另外，li元素更适合构建这些标签吗？我是否使用过bootstrap，如果你知道它有内置的解决方案，我非常愿意为此而努力。

JSBIN

<!--HTML-->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="vendor_container"> 
<div class="vendor_header">
  <span>
     Company
  </span>
</div>

<div class="vendor_tabs">  
  <div class="vendor_tab vendor_contacts">
    Contacts
  </div>
  <div class="vendor_tab vendor_clients">
    Clients
  </div>
  <div class="vendor_tab vendor_notes">
    Notes  
  </div>
     <div class="clear"></div>
</div>  
<div class="vendor_pane vendor_contacts">
  <table class="detail_table contacts">
     <thead>
        <tr>
           <th>
              Name
           </th>
           <th>
              email
           </td>
           <th>
              Phone
           </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>
              Dave Sample
           </td>
           <td>
              dsample@sample.com
           </td>
           <td>
              555.123.1234
           </td>
           <td>
              <a href="#" class="edit_contact">
              Edit
              </a>
           </td>
        </tr>
        <tr>
           <td>
              Jill Sample
           </td>
           <td>
              jsample@sample.com
           </td>
           <td>
              555.123.1234
           </td>
           <td>
              <a href="#" class="edit_contact">
              Edit
              </a>
           </td>
        </tr>
        <tr>
           <td>
              Irene Sample
           </td>
           <td>
              isample@sample.com
           </td>
           <td>
              555.123.1234
           </td>
           <td>
              <a href="#" class="edit_contact">
              Edit
              </a>
           </td>
        </tr>
     </tbody>
  </table>  

</div>

<div class="vendor_pane vendor_contacts">
  <table class="detail_table vendor_clients">
     <thead>
        <tr>
           <th>
              Client
           </th>
           <th>
              ID
           </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>
              Sample 1
           </td>
           <td>
              1234
           </td>
        </tr>
        <tr>
           <td>
              sample 2
           </td>
           <td>
              9874
           </td>
        </tr>
     </tbody>
  </table>  
</div>  

<div class="vendor_pane vendor_notes">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>



</body>
</html>

/ CSS /

body{
  margin:5px;
}
.vendor_container{
  width: 100%;
  max-width:1040px;
}
.vendor_header{

}
.vendor_header, .vendor_tab, th{
  text-align:center;
}
.vendor_tab{
  float:left;
  width:33%;
  padding: 5px 0 12px;
  border-color: gray;
  border-style:solid;
  border-width:1px 1px 0 0;
}
.vendor_tab:first-of-type{
  border-left-width:1px;
}
.border_left{
  border-left-width: 1px;
}
.clear{
  clear:both;
}
.vendor_pane ~.vendor_pane{
  display:none;
}
.vendor_pane table{
  width:100%;
}
.vendor_pane{
  width:100%;
  border:1px solid gray;
}

Answer 1

Bootstrap包含一个＆＃34;对齐＆＃34; nav-tabs部分下的选项。

查看文档here。但是，如果您更喜欢使用他们的CSS。

*{
    box-sizing:border-box;
}
.vendor_tab{
    display: table-cell;
    width: 1%;
    padding: 5px 0 12px;
    border-color: gray;
    border-style:solid;
    border-width:1px 1px 0 0;
}

JSFiddle Demo

PS。 tabified your HTML

Answer 2

这是因为您的标签设置为33％，3 * 33％= 99％而不是100％，您看到的差距是剩余的1％。

修复宽度问题更改：

.vendor_pane {
  width: 99%;
  border: 1px solid gray;
  box-sizing: border-box;
}

或者，使标签宽度为33.33 ..％，尽管这可能会引入渲染细微差别。

您还应该在box-sizing:border-box上设置.vendor-tab，这样他们就不会在较小的宽度上移动到两行。

使三个标签填充容器的宽度

2 个答案: