0

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

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

或者你可以'浮动：离开'你的按钮

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;它会将所有空格合并为一个，因此它不会完全删除它。您可以使用您指定的第二种方法或注释掉两者之间的空格。

于 2013-02-20T13:55:05.163 回答