Question

我已经使用模板根据要求进行编辑，但是很少有元素在移动视图中无法正确对齐。

我尝试使用@media编辑Css文件，并且仅显示提供解析度但没有运气的语法。对页面没有影响

<div class="categories">
  <ul class="cat">
    <li>
      <ol class="type">
        <li><a href="#" data-filter="*" class="active">All Projects</a></li>
        <li><a href="#" data-filter=".residential">Living room</a></li>
        <li><a href="#" data-filter=".office">Bedroom</a></li>
        <li><a href="#" data-filter=".commercial">Modular Kitchen</a></li>
      </ol>
    </li>
  </ul>
  <div class="clearfix"></div>
</div>

Css：

.categories {
padding-bottom: 40px;
text-align: center;
}
ul.cat li {
display: inline-block;
}
ol.type li {
 display: inline-block;
 margin-left: 20px;
}
ol.type li a {
 color: #a7c44c;
 font-weight: 400;
 font-size: 15px;
 padding: 10px 20px;
 border: 2px solid #a7c44c;
 border-radius: 10px 0 10px 0;
 text-transform: uppercase;
 letter-spacing: 0.5px;

}
ol.type li a.active {
background: #a7c44c;
color: #fff;
}
ol.type li a:hover {
background: #a7c44c;
color: #fff;
}

Answer 1

这两项更改可能会给您带来更好的结果：ol.type li { margin: 15px 0; }和.type, .cat{padding:inherit;}

有效的代码段：

.categories {
  padding-bottom: 40px;
  text-align: center;
}

ul.cat li {
  display: inline-block;
}

ol.type li {
  display: inline-block;
  margin: 15px 0;
}

ol.type li a {
  color: #a7c44c;
  font-weight: 400;
  font-size: 15px;
  padding: 10px 20px;
  border: 2px solid #a7c44c;
  border-radius: 10px 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 10px;
}

ol.type li a.active {
  background: #a7c44c;
  color: #fff;
}

ol.type li a:hover {
  background: #a7c44c;
  color: #fff;
}

.type,
.cat {
  padding: inherit;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="categories">
  <ul class="cat">
    <li>
      <ol class="type">
        <li><a href="#" data-filter="*" class="active">All Projects</a></li>
        <li><a href="#" data-filter=".residential">Living room</a></li>
        <li><a href="#" data-filter=".office">Bedroom</a></li>
        <li><a href="#" data-filter=".commercial">Modular Kitchen</a></li>
      </ol>
    </li>
  </ul>
  <div class="clearfix"></div>
</div>

无法在移动视图中对齐元素

1 个答案: