CODEWITHSUNDEEP
htmlcss
Gav
Gav

Reputation: 35

CSS & HTML Button Under each other instead of Side By Side

Basically the issue I am having today is the buttons I'm making are appearing under each other rather than side by side.

This is my code CSS:

(Buttons are 140 x 32)

/* BUTTON */

a {
    text-decoration: none;
}

ul#redbutton li.newbutton {
    background: url("../images/blank_button.png") no-repeat;
    width: 140px;


    color: #FFFFFF;
    font-weight:bold; 
    text-decoration: none;   
    text-transform:uppercase; 
    text-align:center;
    font-size:12px;   
    line-height:30px;   
}
ul#redbutton li.newbutton:hover {
    background: url("../images/blank_button_hover.png") no-repeat;
    width: 140px;

    color: #FFFFFF;
    font-weight:bold; 
    text-decoration: none;   
    text-transform:uppercase; 
    text-align:center;
    font-size:12px;   
    line-height:30px;   
}
/* BUTTON END*/

HTML:

<ul id="redbutton">
<a href="link.php"><li class="newbutton">TEXT</li></a>
<a href="link.php"><li class="newbutton">TEXT</li></a>
</ul>

Screenshot: https://i.sstatic.net/fzYLj.png

Upvotes: 2

Views: 37191

Answers (5)

Arbel
Arbel

Reputation: 30999

First, fix your HTML (a tag can't be a direct child of ul)

<ul id="redbutton">
    <li class="newbutton"><a href="link.php">TEXT</a></li>
    <li class="newbutton"><a href="link.php">TEXT</a></li>
</ul>

Then, there are many ways to make the lis (which you make look like buttons) appear side by side, this is one of them. Add this to your CSS:

ul#redbutton li.newbutton {
    float:left;
}

DEMO: http://jsfiddle.net/Qh8h2/

Upvotes: 4

user8624067
user8624067

Reputation:

Ok, This might work and all, but all you have to do is this.

<button>Your Text</button><br>
    <button>Your Text</button>

Upvotes: -1

Dryden Long
Dryden Long

Reputation: 10182

As @Arbel stated, you cannot have anything as a direct child of a ul other than an li.

In order to get the buttons side by side you could use floats or you could use display:inline-block; like so:

ul#redbutton li.newbutton {
    display: inline-block;
}

Here is a fiddle: http://jsfiddle.net/hR5mt/

Upvotes: 1

Kasper Ziemianek
Kasper Ziemianek

Reputation: 1349

If you want to make your buttons be displayed side by side you should add display:inline; to ul#redbutton li.newbutton css class like

ul#redbutton li.newbutton {
  background: url("../images/blank_button.png") no-repeat;
  width: 140px;
  display:inline;
}

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362430

You can do this...

ul#redbutton li{
  display:inline;
}

Upvotes: 0

Related Questions