CSS-HTML列表-页面和中心UL左对齐LI项目 [英] CSS - HTML Lists - center UL in page & left align LI items

问题描述

我有以下代码：

.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 项与

I want to center align the entire ul container, while keeping the li items aligned to left.

所以，不要这样：

我想要这样的东西：

我似乎无法使其正常工作。

I can't seem to make it work..

任何帮助将不胜感激。

谢谢！

推荐答案

我找到的唯一解决方案仍然允许整个UL在仍居中的情况下，尽可能从浏览器宽度中获取（以提高响应性）为： / p>

The only solution I found, which still allowed the entire UL to take as much as possible from the browser width (for responsiveness) while still centered, was with:

ul.menu {
   margin: 0 auto;
   width: {x}px
}

并使用 @media 查询可为不同的屏幕尺寸设置理想的宽度。

and using @media queries to set the perfect width for different screen sizes.

这篇关于CSS-HTML列表-页面和中心UL左对齐LI项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！