附加的内容:在具有全宽的文本元素之后是相对于文本而不是元素本身

Question

我正试图从头开始创建一个下拉列表

我想在容器的末尾添加一个箭头,但它不断被限制在文本的旁边.如果span是一个宽度为100%的块元素并且使用:在箭头之后,为什么它在文本旁边而不是在元素的末尾附近？

    <div id="wrap" style="border: solid 1px green; width: 100%;">
         <span style="border: solid 1px blue; width: 100%; display: block;">z</span>
    </div>

    span:after {
         display: inline-block;
         content: " ";
         width: 0;
         height: 0;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
         border-top: 5px solid #aaaaaa;
         padding-top: 2px;
         position: relative;
   }

http://jsfiddle.net/my272eze/

如果我在容器上执行它(#wrap),箭头将出现在新行上.

http://jsfiddle.net/my272eze/3/

我怎么能在容器内得到它？

Answer 1

尝试添加

float: right;
margin: 6px;

到了伪元素

的小提琴实施例