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与

一起玩

＆＃13;

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

＆＃13;

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

＆＃13;

在按钮旁边移动HTML文本

2 个答案: