CODEWITHSUNDEEP
htmlcssdisplay
The East Wind
The East Wind

Reputation: 62

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.

Upvotes: 1

Views: 5250

Answers (3)

BCDeWitt
BCDeWitt

Reputation: 4783

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

Upvotes: 1

UserChamp
UserChamp

Reputation: 26

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>

Upvotes: 1

user4759415
user4759415

Reputation:

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

Upvotes: 2

Related Questions