无法让两个列表项“内联”[关闭]答案

【问题标题】：Can't get two list items to go 'inline' [closed]无法让两个列表项“内联”[关闭]
【发布时间】：2013-11-05 01:38:14
【问题描述】：

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

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

http://cssdesk.com/Wm8yb

【问题讨论】：

父级 - .social 的宽度为 60 像素。删除它并浮动 li，或将它们设置为 inline-block。
非常感谢！我在下面使用了你和乔纳森的评论，它奏效了……谢谢！我可以 +1 你的回复吗？ - 这里是新的，所以不确定它是如何工作的……但是谢谢！ :)
哦，不，我不能投票，因为我没有 15rep。有一天我收集到15个，我会回到这里投票！再次感谢:)

标签： css html-lists

【解决方案1】：

<ul> 元素是带有 socialicons 类的元素。

试试：

ul.socialicons li

【讨论】：

非常感谢！我在上面加入了你和 JoshCs 的回复，它奏效了！非常感谢两位，非常感谢！ :)

【解决方案2】：

这是你的答案：

http://cssdesk.com/mJjJE

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

.socialicons ul

到：

ul.socialicons

【讨论】：

非常感谢您对 Skatox 的帮助，非常感谢！ :)

【解决方案3】：

使用display:inline

或

float:left

【讨论】：

感谢 PHP，感谢您的帮助！ :)

【解决方案4】：

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

希望对你有帮助。

【讨论】：

【解决方案5】：

在这个堆栈溢出线程中有一些很好的响应：CSS: display:inline-block and positioning: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;
}

【讨论】：

感谢 dev-rybo 的帮助 :)

【解决方案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;
}

【讨论】：

非常感谢约书亚！你们所有人都很可爱，非常感谢您的帮助:)