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

I am trying to make three "tabs" fill the entire width of a larger container div, but the width always falls a few pixels short, or if I increase the width of the tabs, the last is pushed onto a lower level. Also, would li elements be more appropriate for building these tabs? I'm using bootstrap if so if you know of a built-in solution it has, I'm very willing to go for that.

我试图让三个“标签”填充一个更大的容器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;
}

2 个解决方案

#1

Bootstrap includes a "justified" option under the nav-tabs section.

Bootstrap包含nav-tabs部分下的“对齐”选项。

Have a look at the documentation here. However, if you'd prefer to just use their CSS.

看看这里的文档。但是,如果您更喜欢使用他们的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

PS。将您的HTML列表

2 个解决方案

#1

更多相关文章

随机推荐