CODEWITHSUNDEEP
css
flamant
flamant

Reputation: 783

text button displayed on multiple lines

I have a header button that is displayed on multiple lines. 

<div class="container">
    <span style="left:32px;">MALISIMMO</span>
    <button  class="btn1" style="left:150px;">Buy</button>
    <button class="btn1" style="left:300px;">About Us Us Us</button>
    <button class="position3" >SIGN IN</button>
</div>

See the fiddle (https://jsfiddle.net/flamant/09csye6f/31/). About Us Us Us is displayed on three lines. How to display it on one line ?

Upvotes: 0

Views: 34

Answers (2)

symlink
symlink

Reputation: 12208

Remove all of the position style rules:

.container {
  height: 65px;
  display: flex;
  align-items: center;
}

.container > *{
  flex-grow: 1;
}

.btn1 {
  border: none;
  background-color: inherit;
  cursor: pointer;
}
<div class="container">
	<span style="left:32px;">MALISIMMO</span>
	<button  class="btn1" style="left:150px;">Buy</button>
	<button class="btn1" style="left:300px;">About Us Us Us</button>
	<button class="position3" >SIGN IN</button>

</div>

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

Add white-space: nowrap

.btn1 {
  border: none;
  background-color: inherit;
  cursor: pointer;
  position: absolute;
  white-space: nowrap;
}

Upvotes: 2

Related Questions