html - 在按钮内设置跨度对齐

Question

我在按钮内有两个跨度。我试图在按钮左侧设置一个跨度(有文本)，在按钮右侧设置另一个跨度(有插入符号)。但是两个跨度都出现在中心。有人可以帮忙

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  content: "";    
}

<button type="button" style="width:300px;"><span style="text-align:left">selected all</span><span style="text-align:right;" class="caret"></span></button>

演示 http://jsfiddle.net/887r8rav/

Answer 1

text-align 在您的情况下不起作用，因为跨度没有任何文本具有类 caret。所以你必须使用 float:right 属性，现在因为我们将使用 float 属性，所以我们也必须清除 float ；所以子元素不会受到影响。/

要使插入符与文本对齐，您还需要使用 position:relative。无需添加内联 CSS。检查Jsbin Demo

.caret {
  display: inline-block;
  width:0px;
  height:0px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  float:right; 
  content: ""; 
  position:absolute;
  right:0;
  top:45%;
}
button{display:block;width:300px; text-align:left; overflow:hidden; position:relative;}

<button type="button">
  <span>selected all</span>
  <span class="caret"></span>
</button>

更新:

您无需在代码中添加额外的 span，只需使用一个 span 标签并使用 :after 伪元素即可实现。

span:after{ 
  content: ""; 
  position:absolute;
  right:0;
  top:45%;
   vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  display:inline-block;
}


button{display:block;width:300px; text-align:left; overflow:hidden; position:relative;}

<button type="button">
  <span>selected all</span>
</button>