Question

我无法使用div

水平内联我的display: inline;

这是我的代码：

 <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：

我告诉它inline，并且它一直垂直内联

#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中将display添加到.links ul属性：

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

Answer 2

Jad的回答是一个解决方案，我的回答是一些解释。

.links  ul li {
  display: inline;
}

此代码将使您的列表元素内联。全部0个。您正在使用div元素，而CSS规则将无法找到这些元素。您可以更改规则或HTML，但是您希望将CSS规则应用于正确的元素类型。（Michael_B是正确的，ul中的非li是无效的HTML）

Answer 3

您需要设置#facebook, #twitter{display:inline-block}。这就是全部。

＆＃13;

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

＆＃13;

<div class="links">
  <ul>
    <div id="twitter">
      <a href="#">
        <li>
          <img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" />
        </li>
      </a>

    </div>
    <div id="facebook">
      <a href="#">
        <li>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" />
        </li>
      </a>

    </div>
  </ul>
</div>

＆＃13;

我的图像不会水平对齐

3 个答案: