我的圖片不會水平對齊

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：

我已經告訴它是並且它保持垂直內嵌

#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

亞德的回答是一個解決方案，我的回答是，相反，一些解釋。

.links ul li { 
    display: inline; 
} 

此代碼將使您的列表元素內聯。他們全部0。您正在使用div元素，而這些元素不會被您的CSS規則找到。您可以更改規則或HTML，但您希望以某種方式將CSS規則應用於正確的元素類型。 （Michael_B是對的，ul裏面的非li是無效的HTML）

Answer 3

你需要設置#facebook, #twitter{display:inline-block}。就這樣。

#twitter img, 
 
#facebook img { 
 
    padding: 10px; 
 
    height: 60px; 
 
    width: 60px; 
 
} 
 
#twitter, 
 
#facebook { 
 
    display: inline-block; 
 
} 
 

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

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