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

Question

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

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

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

示例：

我放了一个 jsfiddle here。

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

Answer 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>

Answer 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>

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

Footer content cannot get margin in new line

html

css

twitter-bootstrap