html - 我的图像不会水平对齐

Question

我无法使用 display: inline;

水平内联我的 div

这是我的代码:

 <div class = "links">
   <ul>
      <div id = "twitter">
         <a href = "#">
            <li><img src="images/twitter.png" /> </li>
         </a>
      </div>
      <div id = "facebook">
         <a href = "#">
            <li><img src="images/facebook.ico" /></li>
         </a>
      </div>
   </ul>
</div>

这是我的CSS:

我已经告诉它是内联，它一直在垂直内联

#facebook img {
  padding: 10px;
  height: 100px;
  width: 100px;
}
#twitter img {
  padding: 10px;
  height: 100px;
  width: 100px;
}
.links  ul li {
  display: inline;
}
.links ul {
  background-color: rgb(0, 125, 210);
  float: center;
}

Answer 1

尝试将 flex 添加到 .links ul 中的 display 属性:

.links ul {
  background-color: rgb(0, 125, 210);
  float: center;
  display: flex;
}