CODEWITHSUNDEEP
htmlcss
LP13
LP13

Reputation: 34109

Setting span alignment inside button

i have two spans inside the button . Im trying to set one span ( which has text) to left of the button and other span ( which has caret) to the right of the button. But both the spans appears at the center. Can someone help

.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>

Demo http://jsfiddle.net/887r8rav/

Upvotes: 4

Views: 26033

Answers (3)

Kheema Pandey
Kheema Pandey

Reputation: 10265

text-align won't work in your case because there is no any text for span have class caret. So you've to use float:right property, Now since we'll use the float property we've to clear the float as well; so child elements won't get affected./

To make align the caret with text you've to play with position:relative as well. No need to add inline CSS. Check 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>

Update:

You no need to add extra span in your code, that can be achieve just using one span tag and using :after pseudo element.

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>

Upvotes: 5

stanze
stanze

Reputation: 2480

Use css float property to align the elements respectively. Try this

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

Upvotes: 2

Akshay
Akshay

Reputation: 14348

Use float instead of 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>

Upvotes: 1

Related Questions