Aligning buttons side by side?

Question

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 1

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;
 }

Answer 2

Not all tags in HTML need to have a closing tag, but <button> is definitely one of them. Also, as was pointed out in the comments, only one of the two selectors with display: none; are necessary for this snippet, so I removed one of them.

 button { border: 3px solid red; border-collapse: collapse; padding: 16px; background-color: blue; width: 25%; margin: 0px -1px 0px -1px; display: inline; } .bttn + .content { display: none; } .bttn:hover + .content { display: block; } 

 <div class="main"> <div class="bttn"><button>abcdef</button></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><button>abcdef</button><button>abcdef</button> 

As a side note, I've changed the HTML to include quotes. It may not be necessary for attributes without spaces (unless you're using an XHTML doctype), but consistency is important - forming good habits prevents a lot of future human errors and code is easier to modify later. You'll find that alternating double/single quotes are preferred in situations where HTML and JS are mixed:

• <button onclick="alert('hey');">

• element.innerHTML = '<div class="my-div">hey</div>';

...If you change the quotes in either of these examples, it changes how the code/markup is interpreted. So, if you want to stay consistent, choose one for markup and one for JS code, then stick to it. Though, I think you'll find double quotes are used more often in HTML and single quotes in JS.

UPDATE : I just wanted to note that if you ever use data-* attributes that contain JSON, double quotes in HTML become a problem. This might be the best argument I've found for doing the opposite of the "standard" outlined above. However, you should still always have quotes of some sort

Answer 3

You need to close your <button> tag on the second line and at the bottom. I have rectified your code below, which works fine for me now? I've also added speech marks around your "#" in the anchor.

<div class = main>
<div class = bttn><button>abcdef</button></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>
<button>abcdef</button>
<button>abcdef</button>