我有这段代码:
.menu {
margin: auto;
padding: 0;
list-style-type: none;
}
.item {
width: 60px;
text-align: center;
font-size: 4em;
background-color:red;
display: inline-block;
margin: 5px;
padding: 25px;
}
<ul class="menu">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
</ul>
我希望对齐整个ul
容器,同时保持li
项对齐到左边。
所以不要这样:
我希望有这样的东西:
我似乎无法使其发挥作用..
任何帮助都将不胜感激。
提前致谢!
答案 0 :(得分:0)
您还可以尝试以下弹性框解决方案:
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.menu {
position: relative;
list-style: none;
width: 80vw;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
background: green;
}
.item {
width: 15vw;
height: 15vw;
background: red;
margin: 1vw;
/*the following is only for styling the numbers*/
font-size: 25px;
display: flex;
align-items: center;
justify-content: center;
}
&#13;
<ul class="menu">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
<li class="item">10</li>
</ul>
&#13;
答案 1 :(得分:0)
试试这个:
.menu {
padding: 0;
list-style-type: none;
width: 500px; /* Change this value is you need more li in the same line. You can also use percents */
/*width: 90% */
display: block;
margin-right: auto;
margin-left: auto;
}
.item {
width: 60px;
text-align: center;
font-size: 4em;
background-color:red;
display: inline-block;
margin: 5px;
padding: 25px;
}
答案 2 :(得分:0)
我找到的唯一解决方案仍然允许整个UL尽可能多地从浏览器宽度(响应性)中获取,同时仍然居中,是:
ul.menu {
margin: 0 auto;
width: {x}px
}
并使用@media
查询为不同的屏幕尺寸设置完美的宽度。
答案 3 :(得分:0)
尝试使用display:flex在div(或其他任何元素)中包围元素。保证金:自动属性仅适用于flex。