Question

我是css的新手，而且我遇到了一些可能非常容易且不知道在哪里问的东西！ - 在Wordpress支持下，我被轻轻拒绝，因为他们没有做css帮助...... :(

这是我的问题 - 我不能让两个ul项目内联：

Answer 1

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

尝试：

ul.socialicons li

Answer 2

这是你的答案：

http://cssdesk.com/mJjJE

您需要将.social div的宽度增加到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 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;
}

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

无法获得两个列表项来“内联”

6 个答案:

HTML

CSS