Question

我在部分页面的底部排列了此图标（字体）列表。在移动设备上，图标行在该页面的右侧溢出。我希望每行具有3或4个图标，而不是在较小的屏幕上。我已经尝试了多种可能性，而我得到的最好的结果就是要剪掉这条线（没有显示所有图标）。任何提示将不胜感激，我不知道我在做什么错：-/

HTML：

<!--Skills-->

<div class="container">
 <div class="icons text-center">
   <ul>
   <a href="##" id="html"><li><i class="fab fa-html5"></i></li></a>
   <a href="##" id="css"><li><i class="fab fa-css3-alt"></i></li></a>
   <a href="##" id="js"><li><i class="fab fa-js"></i></li></a>
   <a href="##" id="bootstrap"><li><i class="fab fa-bootstrap"></i></li></a>
   <a href="##" id="sass"><li><i class="fab fa-sass"></i></li></a>
   <a href="##" id="less"><li><i class="fab fa-less"></i></li></a>
   <a href="##" id="github"><li><i class="fab fa-github"></i></li></a>
   <a href="##" id="wordpress"><li><i class="fab fa-wordpress"></i></li></a>
   <a href="##" id="adobe"><li><i class="fab fa-adobe"></i></li></a>
   <a href="##" id="python"><li><i class="fab fa-python"></i></li></a>
  </ul>
 </div>
</div>

对于CSS：

/*Skills*/

.icons {
    padding: 0px 0px;
    }

ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content:space-around;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    }

ul li {
   list-style: none;
   font-size: 30px;
   border-radius: 400px;
   width: 50px;
   height: 50px;
   display: block;
   text-align: center;
   padding-top: 4px;
   padding-bottom: 0px;
   color: #2c3e50;
}

.icons > ul li {
flex: 1;
}

form ul li {
  font-size: 15px;
  width: inherit;
  color: #ff0000;
  text-align: left;
}

form ul {
  margin-left: 0px;
  margin-right: 0px;
  height: 10px;
}

/*What I tried so far... some of them might be nonesense but I was desperate!*/

@media (max-width: 450px) {
    .icons {
        padding: 25px;
        width: 25%;
        flex-wrap: wrap;
        position: absolute;
        margin:auto;
        justify-content: center;
        align-items: center;
        display:inline-block;
        text-align: center;
        overflow-x: hidden;
        line-height: 1.2;
        width: 100%;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    }

@media (max-width: 450px) {
    .icons li {
      width: 50%;
    }

Answer 1

您本可以通过这种方式完成

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container text-center">

  <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-html5"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span> <span style="padding:5px">
  <i class="fab fa-facebook-f"></i>
  </span>
  <span style="padding:5px">
  <i class="fab fa-twitter"></i>
  </span>
</div>

Answer 2

重组代码以删除ul，li并让默认行为对其进行管理；

下面的代码段：

i {
  list-style: none;
  font-size: 30px;
  border-radius: 400px;
  width: 50px;
  height: 50px;
  display: block;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 0px;
  color: #2c3e50;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Do you really need ul, li ?
<hr/>
<div class="icons text-center">
  <a href="##" id="html"><i class="fab fa-html5"></i></a>
  <a href="##" id="css"><i class="fab fa-css3-alt"></i></a>
  <a href="##" id="js"><i class="fab fa-js"></i></a>
  <a href="##" id="bootstrap"><i class="fab fa-bootstrap"></i></a>
  <a href="##" id="sass"><i class="fab fa-sass"></i></a>
  <a href="##" id="less"><i class="fab fa-less"></i></a>
  <a href="##" id="github"><i class="fab fa-github"></i></a>
  <a href="##" id="wordpress"><i class="fab fa-wordpress"></i></a>
  <a href="##" id="adobe"><i class="fab fa-adobe"></i></a>
  <a href="##" id="python"><i class="fab fa-python"></i></a>
</div>

使用Bootstrap

2 个答案: