How to fit 5 bordered divs exactly inside a containing bordered div
When I try to put 5 inline-block divs of 20% width with 1px borders, inside a containing div, also with a 1px border, they wrap on to the next line.
They do fit if I get rid of all the borders.
I understand that this is because the divs take up 100% of the containing divs area, including its padding and border area, meaning that they don't fit within the borders, so it has to wrap.
My question is how to modify this so that I can make them fit exactly. Surely this is a common problem?
<html>
<head>
<title> Test </title>
<style type=text/css>
div
{
margin: 0;
padding: 0;
}
#navBar
{
border: 1px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 50%;
}
.navBtn
{
border: 1px solid black;
开发者_开发技巧 display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div id="navBar">
<div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div><div class="navBtn" style="width:20%">Text</div>
</div>
</body>
</html>
As a side note, it's crazy that if I put the 5 divs on their own lines, they get rendered with space between them, hence why they're all on one line. In my real code the divs are generated with php, so it's not long.
margin:0 -1px 0 -1px gives you an easy place to start.
Would also recommend using float:left for this since display:inline-block is buggy in some browsers.
To get your container <div> to expand vertically to fit content, just have an element with clear:both after your floated ones.
All can be seen here: http://jsfiddle.net/steve/qEJaA/
One idea is to get rid of the 1px border for your .navBtn class, and create a nested element in each navBtn div:
<html>
<head>
<title> Test </title>
<style type=text/css>
div
{
margin: 0;
padding: 0;
}
#navBar
{
border-top: 1px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 50%;
}
.navBtn
{
display: inline-block;
text-align: center;
}
.nav-text { border:1px solid #ccc; }
</style>
</head>
<body>
<div id="navBar">
<div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div><div class="navBtn" style="width:20%"><div class="nav-text">Text</div></div>
</div>
</body>
</html>
Yes, this is a common problem.
There are (at least) two common solutions.
The first is have a wrapper element for each child element, and move the width to that. The border stays on the child element.
Because your id is navBar, this is obviously for some kind of menu, so I'm going to restructure your code to add the described wrapper elements, and to make it more semantic.
See: http://jsfiddle.net/wFeYn/
<ul id="navBar">
<li style="width:20%"><a href="#">Text</a></li><li style="width:20%"><a href="#">Text</a></li><li style="width:20%"><a href="#">Text</a></li><li style="width:20%"><a href="#">Text</a></li><li style="width:20%"><a href="#">Text</a></li>
</ul>
#navBar {
border: 1px solid black;
margin: 10px auto 0 auto;
width: 50%;
margin: 0;
padding: 0
}
#navBar li {
display: inline-block;
text-align: center;
}
#navBar li a {
display: block;
border: 1px solid black;
}
The second solution is to use CSS3's box-sizing: border-box.
This is very easy, and all modern browsers support it (unfortunately IE7 does not).
To use this with your original code you would do:
.navBtn
{
border: 1px solid black;
display: inline-block;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If you do care about IE7, then you should know that display: inline-block won't work without some simple hacks.
For IE7 support, replace display: inline-block; with:
display: inline-block;
*display: inline;
zoom: 1;
That goes for either your original code, or my updated code. But only if you care about IE7.
加载中,请稍侯......
精彩评论