Question

 <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
        <span class="criteria">any</span>
        <span class="caret" style="margin-top:6px;"></span>
</a>

上面的代码给了我以下输出 any ▼

如何将插入符号放置在靠近锚文本的锚点下方。

看看：

any
 ▼

编辑：我在主播和插入符后面有文字，但我希望它在同一行。

before anchor text any text following the anchor
                    ▼

任何一个基本上是句子中间的下拉。所以我希望插入符号接近锚文本，但低于它，不一定是下一行

编辑2：

之前和之后的代码

     <div class="control-group">
        <div class="controls dropdown">
            Create backup if
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
                <div class="criteria">any</div>
                <div class="caret" style="margin-top:6px;display: inline-block"></div>
            </a>

            <ul class="dropdown-menu" id="selector"
                style="text-decoration: none;left: 18%;min-width: 65px;">
                <li><a title="any">any</a></li>
                <li><a title="all">all</a></li>
            </ul>
            of the following are true:
        </div>
    </div>

Answer 1

您可以像这样修改您的插入符号：

<span class="caret" style="position:absolute; margin-top:15px;margin-left:-20px;"></span>

这是最后的外观和片段：

＆＃13;

 Nothing to see there<br>
 If  <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
       <span class="criteria">any</span>
       <span class="caret" style="position:absolute; margin-top:15px;margin-left:-20px;">^</span>
</a> unicorns are watching you, be happy!

＆＃13;

Answer 2

这是我对它的看法......请注意，当您在 - 或之后添加文本时 - 插入符号跟随锚点

.caret {
  display: inline;
  position: relative;
  top: 1em;
  left: -1.2em;
  padding-right: 0;
  margin-right: 0;
  width: 0;
}

a > .caret {
  display: inline-block;
  width: 0;
}

<div class="control-group">
  <div class="controls dropdown">
    Create backup if more code here
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none">
      <span class="criteria">any</span><span class="caret">^</span></a> of the following are true:
  </div>
</div>

已更新以删除多余空格

将插入符号放在锚文本下方

2 个答案: