содержания Footer не может получить маржу в новой линии

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

По сути то, что я сделал придерживается нижний колонтитул в нижней части страницы, и я попытался получить содержимое нижнего колонтитула в одной строке. Это работает хорошо, но когда я изменяю размер страницы, содержимое нижнего колонтитула расположено в новой строке (если для нижнего колонтитула недостаточно места для другого элемента), проблема в том, что новая строка не получает левое поле, которое я Я установил 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>