將HTML文本移到按鈕旁邊

Question

我正在嘗試在按鈕旁邊顯示一些文本，但是該文本僅顯示在按鈕下方。 目前，我的HTML代碼中包含：

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

我要做的就是將文本從按鈕旁邊的{{mockDropVal}} 。 如您所見，我嘗試使用display: inline類（但是我認為我使用不正確）。 同樣，我嘗試讓自己的班級做到這一點，但沒有成功。

任何建議或技巧將不勝感激！

Answer 1

您要輸入的內容是style='display:inline;' ！

編寫class='inline' ，然后在css文件中添加一個.inline{display:inline;}也可以。

話雖如此，您需要稍微更改標記，以便元素彼此相鄰。 我已經將<a>標記移到了<button>旁邊，因為這就是您想要的位置。 我也將class=''更改為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>

或使用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}

Answer 2

我已經根據您的預期輸出調整了您的代碼。 研究變化。 這是一個可以玩的jsbin

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

將HTML文本移到按鈕旁邊

問題描述

2 個解決方案

解決方案1
3 已采納 2015-07-29 13:40:55

解決方案2
1 2015-07-29 14:08:16

將HTML文本移到按鈕旁邊

問題描述

2 個解決方案

解決方案1 3 已采納 2015-07-29 13:40:55

解決方案2 1 2015-07-29 14:08:16

解決方案1
3 已采納 2015-07-29 13:40:55

解決方案2
1 2015-07-29 14:08:16