inline-block sur la durée de

Je m'attendais à la durée de deux étiquettes dans l'exemple suivant pour afficher les uns à côté des autres, au lieu de cela, ils affichent l'une en dessous de l'autre. Si je définis la largeur de la classe de durée.droit de 49% ils affichent les uns à côté des autres. Je ne suis pas en mesure de comprendre pourquoi le droit de l'échelle est poussé vers le bas comme le droit span a quelques invisible padding/margin qui lui fait prendre plus de 50%. Je suis en train de le faire sans l'aide de tableaux html. Des idées?

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            margin: 0;
        }

        html,body{
            margin:0;
            padding:0;
            height:100%;
            width:100%;
            border:none;
        }

        div.header{
            width:100%;
            height:80px;
            vertical-align:top;
        }

        span.left {
            height:80px;
            width:50%;
            display:inline-block;
            background-color:pink;
        }

        span.right {
            vertical-align:top; 
            display:inline-block;
            text-align:right;
            height:80px;
            width:50%;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class='header'>
        <span class='left'>Left Span 50% width</span>
        <span class='right'>Right Span 50% width</span>
    </div>
</body>
</html>

Merci pour l'explication. Le float:left fonctionne à merveille, avec les résultats escomptés dans FF 3.1. Malheureusement, dans IE6, le côté droit span rend 50% de la 50%, en effet en lui donnant une largeur de 25% de la fenêtre du navigateur. Réglage de la largeur à 100% atteint les résultats escomptés, mais les pauses dans FF 3.1 qui est dans le respect des standards de mode, et je le comprends. À la faire fonctionner à la fois dans FF et IE 6, sans avoir recours à des hacks ou à l'aide de plusieurs CSS feuilles a été un défi

InformationsquelleAutor rams | 2008-08-29