CODEWITHSUNDEEP
htmltwitter-bootstrap
Michael
Michael

Reputation: 13636

How to make HTML elements in one line?

Here is some code from my project:

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

How can I make the text(select) and the caret appear in one line?

Upvotes: 1

Views: 83

Answers (4)

TOho
TOho

Reputation: 340

Put the Span with the caret in the #btnText div.

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

Upvotes: 1

DavidT
DavidT

Reputation: 2481

By simply adding display:inline-block to your #bigText div as in the snippet below. I have also added some margin for spacing. 

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

Upvotes: 0

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

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

Upvotes: 0

Paul Booblick
Paul Booblick

Reputation: 363

use this css:

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

Upvotes: 3

Related Questions