Как сделать HTML-элементы в одной строке?

Question

Вот код из моего проекта:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button> 
 
       
 
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'> 
 
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li> 
 
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>     
 
<li class='divider'></li> 
 
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>          
 
</ul> 
 
</div>

Как я могу сделать текст (выбрать) и каретка появляются в одной строке?

Answer 1

использовать этот CSS:

#btnText{ 
display: inline; 
padding-right: 10px; 
} 

Answer 2

Поместите Промежуток с кареткой в ​​#btnText дел.

<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button> 

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button> 
 
       
 
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'> 
 
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li> 
 
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>     
 
<li class='divider'></li> 
 
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>          
 
</ul> 
 
</div>

Answer 3

#btnText{ 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button> 
 
       
 
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'> 
 
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li> 
 
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>     
 
<li class='divider'></li> 
 
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>          
 
</ul> 
 
</div>

Answer 4

Просто добавив display:inline-block в свой #bigText DIV, как в приведенном ниже фрагменте кода. Я также добавил некоторый запас для интервала.

#btnText{ 
 
    display: inline-block; 
 
    margin-right: 5px; 
 
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button> 
 
       
 
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'> 
 
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li> 
 
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>     
 
<li class='divider'></li> 
 
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>          
 
</ul> 
 
</div>