Question

我在我的HTML文档中添加了一些CSS，以便将我在HTML中的奖励列表集中在一起，但是当我更改浏览器的分辨率或我的计算机分辨率时，它会变成一团糟。这是我到目前为止我的CSS和HTML：

.awards {
  margin-left:400px;
  margin-right:400px;
  background-color:grey;
  border-style:solid;
  border-width:5px;
  border-color:black;
}

<ul class = "awards">
  <li>2007 Boat International World SuperYacht Award – Best Sailing Yacht Interior</li>
  <li>2007 Boat International World SuperYacht Award – Best Sailing Yacht 45m and above</li>
  <li>2007 Boat International World SuperYacht Award – Sailing Yacht of the Year</li>
  <li>2007 Showboats international Award – most innovative sailing yacht</li>
  <li>2007 Showboats international Award – best sailing yacht over 40m</li>
  <li>2007 Showboats international Award – best sailing yacht interior</li>
  <li>2007 Showboats international Award – highest technical achievement in a sailing yacht</li>
  <li>2007 International SuperYacht Society – best sailing yacht over 36m</li>
  <li>2009 Perini Navi Cup</li>
  <li>2010 Palma Superyacht Cup</li>
  <li>2011 Perini Navi Cup</li>
  <li>2012 Yacht Capital Marina Yachting</li>
  <li>2013 First Baccarat SuperYacht World trophy - Finest SuperYacht Ever</li>
</ul>

Answer 1

您正在使用具有固定值的margin-left和margin-right（以及不支持响应式设计的单元）。因此，您可以使用min-width和max-width：

更改以下代码

.awards {
  background-color:grey;
  border:5px solid black;
  min-width:300px;
  max-width:400px;
  margin:0 auto;
}

<ul class = "awards">
  <li>2007 Boat International World SuperYacht Award – Best Sailing Yacht Interior</li>
  <li>2007 Boat International World SuperYacht Award – Best Sailing Yacht 45m and above</li>
  <li>2007 Boat International World SuperYacht Award – Sailing Yacht of the Year</li>
  <li>2007 Showboats international Award – most innovative sailing yacht</li>
  <li>2007 Showboats international Award – best sailing yacht over 40m</li>
  <li>2007 Showboats international Award – best sailing yacht interior</li>
  <li>2007 Showboats international Award – highest technical achievement in a sailing yacht</li>
  <li>2007 International SuperYacht Society – best sailing yacht over 36m</li>
  <li>2009 Perini Navi Cup</li>
  <li>2010 Palma Superyacht Cup</li>
  <li>2011 Perini Navi Cup</li>
  <li>2012 Yacht Capital Marina Yachting</li>
  <li>2013 First Baccarat SuperYacht World trophy - Finest SuperYacht Ever</li>
</ul>

注意：如果您想创建一个应对多个设备做出响应的网站，您可以使用Bootstrap之类的CSS框架。

Answer 2

如果您担心网站会调整到多种屏幕尺寸，我肯定会查找和理解响应式设计，我认为您的方法存在许多问题，导致其无法响应。

如果您只想将元素居中，最好的方法可能是将左右边距设置为自动：

.awards{
    margin: 0 auto;
}

更改分辨率时保持内容相同

2 个答案: