Geek asks and answers

How to put 5 border divs exactly inside the containing border div

When I try to put 5 inline div blocks with a width of 20% with 1px borders, inside the containing div, also with a 1px border, they wrap to the next line.

They are suitable if I get rid of all boundaries.

I understand that this is due to the fact that divs occupy 100% of the div area, including the fill area and borders, which means that they do not correspond to the borders inside , so it should wrap.

My question is how to change this so that I can accurately select them. 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>

, : 5 div , , . divs php, .

+3
3

margin:0 -1px 0 -1px .

float:left , display:inline-block .

<div> , , clear:both .

: http://jsfiddle.net/steve/qEJaA/

+2

- 1px .navBtn div navBtn:

<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>
+2

, .

( ) .

width . .

id - navBar, - , , , .

: 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;
}

- CSS3 box-sizing: border-box.

, ( , IE7 ).

, :

.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;
}

IE7, , display: inline-block - .

To support IE7, replace display: inline-block;with:

display: inline-block;
*display: inline;
zoom: 1;

This applies to either the source code or my updated code. But only if you care about IE7.

+2
source

More articles:


All Articles