Moving HTML text next to a button

Question

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 the display: 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!

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