如何证明没有空白 space 和隐藏文本的 ul 列表?
How to justify ul list without blank space and text hidden?
我有一个 UL 需要证明。
#main {
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
list-style:none;
}
#main li {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
text-align:center;
}
HTML:
<ul id="main">
<li style="background-color:red;">RED</li>
<li style="background-color:blue;">BLUE</li>
<li style="background-color:green;">Green div with more content.</li>
</ul>
但现在开头有空白 space,文本在最后一个元素上为 cut/hidden。
如何停止切割最后一个绿色 li 元素中的文本?我正在研究 Bootstrap Safari 的 nav-justified 替换。
将 margin: 0; padding: 0;
添加到 ul
元素。
参见 updated jsfiddle:
#main {
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
list-style-type:none;
margin: 0;
padding: 0;
}
我有一个 UL 需要证明。
#main {
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
list-style:none;
}
#main li {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
text-align:center;
}
HTML:
<ul id="main">
<li style="background-color:red;">RED</li>
<li style="background-color:blue;">BLUE</li>
<li style="background-color:green;">Green div with more content.</li>
</ul>
但现在开头有空白 space,文本在最后一个元素上为 cut/hidden。 如何停止切割最后一个绿色 li 元素中的文本?我正在研究 Bootstrap Safari 的 nav-justified 替换。
将 margin: 0; padding: 0;
添加到 ul
元素。
参见 updated jsfiddle:
#main {
width: 100%;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
list-style-type:none;
margin: 0;
padding: 0;
}