Мои изображения обыкновение горизонтально выровнять

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 прав, что не-li внутри ul недействителен 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>