[英]how to always have same number of fixed width <li> per row in a single fluid <ul>?
Lets say I have 10 <li>
in a single fluid <ul>
. 可以说我在一个流体
<ul>
有10个<li>
<ul>
。 If I resize the browser the <li>
will go next row. 如果我调整浏览器的大小,
<li>
将进入下一行。 Lets also say we want the <ul>
centered on the page: 假设我们希望
<ul>
位于页面中心:
Html: HTML:
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
Css: CSS:
ul {
text-align: center;
}
li {
display: inline-block;
text-align: left;
}
That will center our <ul>
but obviously if we have 10 <li>
and the page/screen size only manages to have 4 <li>
per row, then we will have 2 <li>
centered in the last row and not aligned to the first <li>
of the previous rows. 这将使我们的
<ul>
居中,但是很显然,如果我们有10个<li>
并且页面/屏幕大小仅设法使每行有4个<li>
,那么我们将有2个<li>
位于最后一行的中心,并且不与前几行的第一个<li>
。
I am not sure if what I am trying to achive can be done only using css ( I presume if each rows was a different <ul>
then it'd be ok, but I only want 1 <ul>
. 我不确定我要达到的目标是否只能使用css来完成(我想如果每行都是不同的
<ul>
那还可以,但是我只想要1个<ul>
。
So I wonder if the trick can and/or should be done using jquery? 所以我想知道是否可以和/或应该使用jquery来完成技巧?
You need to put your ul in containing div and align that center and then align your ul left and make it inline-block: 您需要将ul放在div中并对齐该中心,然后将ul左对齐并使其内联:
http://jsfiddle.net/pdfbG/ http://jsfiddle.net/pdfbG/
html html
<div>
<ul>
<li>Test</li>
<li>Lorem</li>
<li>Another one</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
css 的CSS
div {text-align:center;}
ul {
margin:0;
list-style:none;
display: inline-block;
text-align:left;
}
li {
display: inline-block;
text-align: left;
}
ul {
text-align: center;
display:table;
width: 400px; //example
}
li { display: inline-block; li {display:inline-block; text-align: left;
文字对齐:左; }
}
use calc function in width 在宽度中使用calc函数
width:calc(100%-your margins in px or %);
this works i hope 我希望这可行
You need to make 10% width of your li
elements to make them fluid: 您需要将
li
元素的宽度设置为10%,以使其流畅:
li {
display: inline-block;
text-align: left;
border: 1px #AAA solid;
width: 10%;
font-size: 14px;
box-sizing: border-box;
vertical-align: top;
}
只需将宽度设置为10%,它们就会自行调整大小
width: 10%;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.