0

私が遭遇した問題の簡単な例があります。2 つの div にはそれぞれ 5 つのボタンがあり、それぞれ 20% の幅でレンダリングされることに注意してください。最初のセットは限界を超えており、その理由は不明です。開発ツールを使用すると、div 自体が 100% 幅の適切なサイズであることがわかります。ボタンが連結されている2番目のセットでは、機能します。誰でもこれを説明できますか？

jsfiddle デモ

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .nav5 {
            white-space: nowrap;
         }
         .nav5 button {
             height: 50px;
             width: 20%;
         }
    </style>
 </head>
<body>
    <div class="nav5">
        <button>A</button>
        <button>B</button>
        <button>C</button>
        <button>D</button>
        <button>E</button>
    </div>
    <div class="nav5">
        <button>A</button><button>B</button><button>C</button><button>D</button><button>E</button>
    </div>
</body>
</html>
4

2 に答える 2

1

または、ボタンを「float：left」することもできます

http://jsfiddle.net/AdeMU/1/

    .nav5 {
        white-space: nowrap;
    }
    .nav5 button {
        height: 50px;
        width: 20%;
        margin:0;
        float:left;
    }
于 2013-02-20T14:13:27.433 に答える
0

指定したにもかかわらず、white-space: nowrap;すべての空白が 1 つに折りたたまれるため、完全に削除されるわけではありません。指定した 2 番目の方法を使用するか、その間のスペースをコメント アウトすることができます。

于 2013-02-20T13:55:05.163 に答える