页脚内容无法在新行中获得边距答案

【问题标题】：Footer content cannot get margin in new line页脚内容无法在新行中获得边距
【发布时间】：2016-08-16 20:28:48
【问题描述】：

我创建了一个具有这种结构的简单页脚内容：

<div id="footer">
    <div id="footer-content">
        <p>System developed by a developer</p> |
        <span id="select-language" class="label label-info">
            english
        </span>
    </div>
</div>

现在我已经应用了这个 css：

#footer
{
    background-color: #3A3A3A;
    border-top: 1px solid #337ab7;
    font-size: 13px;
    overflow: auto;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#footer *
{
    padding: 10px 15px;
    display: inline-block;
}

基本上我所做的是将页脚粘贴在页面底部，并尝试将页脚的内容放在一行中。这很好用，但是当我调整页面大小时，页脚内容被放置在一个新行中（如果页脚中的其他项目没有足够的空间），问题是新行没有得到我的左边距已经设置了15px 我可以为此做些什么？

例子：

我放了一个 jsfiddle here。

请注意，我也在使用Bootstrap。谢谢。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

| 不在任何元素中，它是纯文本。这样你的 CSS 中的 * 就不会捕捉到它。

新旧示例彼此相邻：

唯一的区别是div 包围|。

#footer
{
    background-color: #3A3A3A;
    border-top: 1px solid #337ab7;
    font-size: 13px;
    overflow: auto;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    width: 200px;
}

#footer *
{
    padding: 10px 15px;
    display: inline-block;
}

#footer2
{
    background-color: #3A3A3A;
    border-top: 1px solid #337ab7;
    font-size: 13px;
    overflow: auto;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 300px;
    width: 200px;
}

#footer2 *
{
    padding: 10px 15px;
    display: inline-block;
}

<div id="footer">
    <div id="footer-content">
        <p>System developed by a developer</p> |
        <span id="select-language" class="label label-info">
            english
        </span>
    </div>
</div>

<div id="footer2">
    <div id="footer-content">
        <p>System developed by a developer</p> 

        <div>
            |        <!-- Over here -->
        </div>

        <span id="select-language" class="label label-info">
            english
        </span>
    </div>
</div>

【讨论】：

谢谢，但我真的需要每次都创建一个 div 必须添加分隔符？
@user3287550 是的，如果你想要元素之间的空间，这是最干净的方法。我个人会使其更具表现力，并创建像<div class="seperator">|</div> 这样的标签，以确保您在开发一年后知道自己在做什么。现在，您的网站可能很小，但在大型项目中却大有帮助！
有可用的引导分隔符吗？
@user3287550 我不知道引导程序等效项。同样的问题是什么意思？
尝试缩小窗口，直到跨度换行，似乎没有得到边距

【解决方案2】：

您是否正在尝试实现这样的目标

#footer
{
    background-color: #3A3A3A;
    border-top: 1px solid #337ab7;
    font-size: 13px;
    overflow: auto;
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#footer *
{
    padding: 10px 15px;
    display: inline-block;
      vertical-align: top;
}
span#select-language {
    margin-left:10px;
   }  
 #footer p{padding-top:0px}

@media only screen and (max-width:350px) {
    #footer p{width:65%; padding-top: 0; float:left;}
span#select-language {
    margin-left:10px;
   }  
  #footer-content {
    width: 100%;
   }
    

}

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="footer">
    <div id="footer-content">
        <p>System developed by a developer</p> |
        <span id="select-language" class="label label-info">
            english
        </span>
    </div>
</div>

【讨论】：