Moving HTML text next to a button
Solution 1
What you've meant to put is style='display:inline;'
!
Writing class='inline'
and then having a class in your css file that was .inline{display:inline;}
would work the same though.
Having said that, you need to change your markup a little so that the elements will be next to each other. I've moved the <a>
tag next to the <button>
, as that's where you want it to be. I've also changed class=''
to style=''
.
<div style="display: inline;">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<a style="display: inline;">{{mockDropVal}}</a>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
Or with the CSS:
<div class="inline">
<div class="td-dropdown" dropdown>
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
<a class="inline">{{mockDropVal}}</a>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a><li>
<li><a ng-click="dropChange('floor')">Floor</a></li>
<li><a ng-click="dropChange('building')">Building</a></li>
<li><a ng-click="dropChange('room')">Room</a></li>
</ul>
</div>
</div>
.inline{display:inline}
Solution 2
I have adjusted your code according to your expected output. Do study the changes. Here is a jsbin to play with
.wrapper {
display: inline-block;
vertical-align: top;
}
.td-dropdown .buttons,
.td-dropdown .dropdownmenu {
display: inline-block;
}
.dropdownmenu ul li {
display: block;
list-style-type: none;
vertical-align: top;
}
.td-dropdown .buttons {
vertical-align: top;
!important
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="td-dropdown" dropdown>
<div class="buttons">
<button type="button" class="btn btn-primary btn-sm" dropdown-toggle>
Filter Search by:<span class="caret" aria-hidden="true"></span>
</button>
</div>
<div class="dropdownmenu">
<ul class="dropdown-menu" role="menu">
<li><a ng-click="dropChange('all')">All</a>
<li>
<li><a ng-click="dropChange('floor')">Floor</a>
</li>
<li><a ng-click="dropChange('building')">Building</a>
</li>
<li><a ng-click="dropChange('room')">Room</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">{{mockDropVal}}</div>
Graeham Broda
Updated on June 04, 2022Comments
-
Graeham Broda over 1 year
I'm trying to have some text show up next to a button, however the text only shows up underneath the button. Currently, I have in my HTML code:
<div class="display: inline;"> <div class="td-dropdown" dropdown> <button type="button" class="btn btn-primary btn-sm" dropdown-toggle> Filter Search by:<span class="caret" aria-hidden="true"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a ng-click="dropChange('all')">All</a><li> <li><a ng-click="dropChange('floor')">Floor</a></li> <li><a ng-click="dropChange('building')">Building</a></li> <li><a ng-click="dropChange('room')">Room</a></li> </ul> </div> </div> <a class="display: inline;">{{mockDropVal}}</a>
All I want to do is move the text from
{{mockDropVal}}
next to the button. As you can see, I've tried using thedisplay: inline
class (however i think i am using it incorrectly). As well, I tried to make my own class to do this, but it was unsuccessful.Any advice or tips would be greatly appreciated!