Pranav Pranav - 4 months ago 10
CSS Question

Aligning buttons side by side?

I have the following page:

HTML:

<div class=main>
<div class=bttn>
<button>abcdef</div>
<div class=content>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
<a href=#!>jksg</a>
</div>
</div>

<button>abcdef
<button>abcdef
<button>abcdef
</div>


CSS :

button {
border: 3px solid red;
border-collapse: collapse;
padding: 16px;
background-color: blue;
width: 25%;
margin: 0px -1px 0px -1px display: inline;
}

.content {
display: none;
}

.bttn + .content {
display: none;
}

.bttn:hover + .content {
display: block;
}


when you run the code, the first button appears alone on the line while the rest of them arrange themselves on the next line side by side. i guess the same will happen if i insert the hidden div's on the other buttons. Any ways to change that?? I changed the display of button (the tag), bttn (the class) and content(the class) all to inline but still the problem persists. I think the problem may be of the position property but i am not sure. If thats the case pls also tell me whats going wrong here.

Answer

This will get you showing your buttons all on one line

https://jsfiddle.net/2wwfxfqy/1/

But you now have the problem of how to get your hidden content not force the other 3 down a line when you choose to display it.

Here is the CSS mod made so far

.main button,
.bttn button {
  float:left;
 }
Comments