Question

我有一个我跑过的问题的简单例子。请注意，两个div各有5个按钮，每个按钮的宽度应为20％。第一组超出界限，我不知道为什么。如果使用开发工具，您可以看到div本身的宽度正确为100％。在按钮连接的第二组中，它可以正常工作。谁能解释一下呢？

<!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>

Answer 1

或者你可以'漂浮：左'你的按钮

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

    .nav5 {
        white-space: nowrap;
    }
    .nav5 button {
        height: 50px;
        width: 20%;
        margin:0;
        float:left;
    }

Answer 2

即使您已指定white-space: nowrap;，它也会将所有空格折叠为一个，因此不会完全删除它。您可以使用您指定的第二种方法或注释掉其间的空格。

HTML / CSS呈现问题

2 个答案: