css - 无法让两个列表项“内联”

Question

我是css的新手，我被一些可能超级简单的东西卡住了，不知道在哪里问！- 在 Wordpress 支持中，我被轻轻拒绝了，因为他们不提供 css 帮助.. :(

这是我的问题 - 我只是无法让两个 ul 项目内联：

http://cssdesk.com/Wm8yb

Answer 1

该<ul>元素是具有 socialicons 类的元素。

尝试：

ul.socialicons li

Answer 2

这是你的答案：

http://cssdesk.com/mJjJE

您需要增加.socialdiv 的宽度以90px使其适合两个图像，还需要删除任何**ul**因为.socialicons属于ul或只是更改规则：

.socialicons ul

到：

ul.socialicons

Answer 3

使用 display:inline

或者

float:left

Answer 4

我对您的 css http://cssdesk.com/LAfFN做了一些更改

我希望这会有所帮助。

Answer 5

在这个堆栈溢出线程中有一些很好的响应：CSS: display:inline-block 和 position:absolute

您还应该注意 Jonathan 的回复，即 .socialicons 是 ul。

话虽如此，如果进行以下两个更改，它将使 li 元素内联。

.socialicons {
  list-style: none; 
  display: inline-block;
  padding-left: 0; 
  padding-bottom: 0;
}  


.socialicons li {
    width:15px;
    display: inline-block;
    padding: 0.3em;
}

Answer 6

您的 CSS 存在一些问题。你没有关闭你的<ul>元素，它的宽度<ul>太小了，以至于它把<li>元素挤成一列。您还混淆了 CSS 选择器语法。而不是.socialicons ul它看起来像你想要的是.socialicons.

实际上只有极少数情况下您应该使用后代选择器。CSS 从右到左解析。有关更多信息，请参见此处：http ://css-tricks.com/efficiently-rendering-css/

http://cssdesk.com/D8xrT

HTML

<div class="social">
      <ul class="socialicons">
        <li id="facebook"><a href="#"><img alt="Facebook" src="http://placekitten.com/g/24/50" width="24" height="50" /></a></li>
        <li id="twitter"><a href="#"><img alt="Twitter" src="http://placekitten.com/g/30/50" width="30" height="50" /></a></li>        
      </ul>
</div>

CSS

.social {
  position: absolute; 
  right: 1.5%;
  top: 5px;
  width: 75px;
}

.socialicons {
    list-style: none; 
  display: inline;
  padding-left: 0; 
  padding-bottom: 0;
}  


.socialicons li {
     display: inline-block;
   padding: 0.3em;
   float:left;
}  

.socialicons ol, ul {
list-style: none;
display: inline-block;
}

.socialicons ul a {
    display: inline-block; 
    text-decoration: none; 
}


.socialicons img {
  max-width: 50%;
  height: auto;
}