【问题标题】: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;
    }
    

    【讨论】:

    • 非常感谢约书亚!你们所有人都很可爱,非常感谢您的帮助:)
    猜你喜欢
    • 2012-03-28
    • 2011-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-31
    • 2015-05-04
    相关资源
    最近更新 更多