我有一个方格div的网格,在ul中显示为li,其中ul被设置为多行水平列表。我想要它,因此UL居中(因为每行的项目数量因设备大小而异)而没有单独的LI居中(如图中第二行所示)。
我已经尝试将它们定位为相对内联块,但是这使得最后一个LI位于中间位置,这是不可取的。
ul
{
position:relative;
display:inline-block;
padding:0px;
height:100%;
margin-left:auto;
margin-right:auto;
}
li
{
margin-left:5px;
position:relative;
display:inline-block;
vertical-align: top;
}
任何与屏幕尺寸无关的建议?
答案 0 :(得分:1)
据我所知,无法完全实现,在某些决议中,您将永远无法删除以下内容:Aligning div to center and its content to the left
使用纯css的最佳喊叫是:
1-使用display: inline-block
和text-align: left
作为@CBroe说:
body{
text-align: center;
}
ul{
display: inline-block;
padding: 0;
text-align: left;
width: 50%;
}
li{
width: 50px;
height: 50px;
border: 1px solid;
margin: 7px;
list-style: none;
display: inline-block;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2-使用position: absolute
和transform
:
ul{
position: absolute;
padding: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
li{
width: 50px;
height: 50px;
border: 1px solid;
margin: 7px;
list-style: none;
display: inline-block;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
3-使用display: inline-block
和float: left
:
body{
text-align: center;
}
ul{
display: inline-block;
padding: 0;
width: 50%;
overflow: hidden;
}
li{
width: 50px;
height: 50px;
border: 1px solid;
margin: 7px;
list-style: none;
float: left;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
修改强>
如果您愿意使用某些js
,可以这样做:
$(document).ready(function() {
setWidth();
$(window).resize(function(){
setWidth()
});
});
function setWidth(){
var $ul = $('ul');
var $li = $('li');
$ul.css('width', 'auto');
var ulWidth = $ul.outerWidth();
var liWidth = $li.outerWidth();
liWidth += parseInt($li.css('margin-left')) + parseInt($li.css('margin-right'));
var div = Math.floor(ulWidth / liWidth);
$ul.css('width', div * liWidth);
}
body{
text-align: center;
}
div{
width: 50%;
margin: 0 auto;
border: 2px solid blue;
padding: 25px;
}
ul{
display: inline-block;
padding: 0;
overflow: hidden;
border: 2px solid red;
}
li{
width: 50px;
height: 50px;
border: 1px solid;
margin: 7px;
list-style: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>this is the div <br/>
\|/ </p>
<div>
<p>this is the ul <br/>
\|/ </p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
请注意,目前ul
位于div
内。{/ p>