CODEWITHSUNDEEP
htmlcssformatting
Graeham Broda
Graeham Broda

Reputation: 141

Moving HTML text next to a button

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!

Upvotes: 3

Views: 16991

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28553

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>

Upvotes: 1

Albzi
Albzi

Reputation: 15609

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}

Upvotes: 3

Related Questions