Question

按钮内有两个跨度。我试图在按钮的左侧设置一个跨度（有文本），在按钮右侧设置其他跨度（有插入符号）。但两个跨度都出现在中心位置。有人可以帮忙吗

＆＃13;

.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: "";    
}

＆＃13;

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

＆＃13;

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

Answer 1

text-align在您的情况下不起作用，因为没有任何span的文本有类caret。所以你要使用float:right属性，因为我们将使用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标记并使用: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>

Answer 2

使用float代替text-align

.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="float:left">selected all</span><span style="float:right;" class="caret"></span></button>

Answer 3

使用css float属性分别对齐元素。试试this

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

在按钮内设置跨度对齐

3 个答案: