logo标签列表

将HTML文本移动到按钮旁边

htmlcssformatting
3

我正在尝试让一些文本显示在按钮旁边，但是文本只显示在按钮下面。目前，在我的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类（但我认为我使用不正确）。此外，我尝试创建自己的类来实现这一点，但没有成功。
任何建议或提示都将不胜感激！
1
你尝试过将<a>元素实际移动到HTML中的按钮旁边吗？而不是放在包含列表的DIV之后。将<a>直接放在<button>后面...然后从那里开始。 - musefan
1
你本意想要放的是style='display:inline;'! 而且在你的css中有一个.inline{display:inline;}的类也可以。 - Albzi
非常感谢你们俩的建议。我实际上采纳了Albzi的建议，问题解决了！是我这个新手犯了错误：）我想把你的评论标记为解决我的问题，但似乎做不到。非常感谢！ - Graeham Broda
我已经为你写了一个答案@Hyrdopotamus，其中包含我的评论，所以你可以将其标记为已接受。我很高兴能够帮助！ - Albzi
2个回答
3
您原本想要使用的是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}
1
我已根据您期望的输出调整了您的代码，请仔细研究更改。这里有一个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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接