Question

我有一个自举面板，在标题中我有一个h3标头标签。我想右对齐标题标题旁边的锚标记，但是h3标记会将锚标记丢弃到下一行。如果我将h3标签设置为其他标题标签，那么我将其松散所有属性。有没有办法jsut删除标题标记的强制将下一个标记放在下面的行上？

<div class="panel-heading yb-panel-heading yb-panel-heading-inner">
                <h3 class="yb-panel-title">Following <span id="followersTotalBottom" style="font-size: 16px; color: grey;">(@Model.TotalFollowers)</span></h3>
                <a style="float: right" href="/space/public/following">show all</a>
            </div>

Answer 1

所有<h#>标记都是块级元素，这意味着它们始终存在于各自的行中。要强制使用您想要的功能，请按以下方式设置CSS：

h3 {
  display: inline;
}

Answer 2

尝试将A标签放入H3

<h3>Following 
    <span>(@Model.TotalFollowers)</span>
    <a href="#">show all</a>
</h3>

Answer 3

问题是标题是一个块元素，因此使用其父元素的整个宽度。您可以将其设为display: inline-block，因此其宽度适合内容。您不应该使用display: inline，因为它会破坏您的利润。

＆＃13;

.yb-panel-title {
  display: inline-block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-heading yb-panel-heading yb-panel-heading-inner">
  <h3 class="yb-panel-title">Following <span id="followersTotalBottom" style="font-size: 16px; color: grey;">(@Model.TotalFollowers)</span></h3>
  <a style="float: right;" href="/space/public/following">show all</a>
</div>

＆＃13;

在标题标记下降到下一行之后停止下一个标记

3 个答案: