5 Replies - 3760 Views - Last Post: 21 July 2013 - 11:44 AM

#1 Hiatus  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 27-May 09

Getting buttons on the same line

Posted 20 July 2013 - 03:21 PM

Hi all,

Want to get a few buttons to stay on the same line but I'm having a bit of trouble doing so...

The HTML:
<div id="buttonzone">
	<input type="submit" name="submit" value="Log in" id="loginbutton">
	<input type="submit" name="signup" value="Sign up" id="signupbutton">
	<a href="signup.html">Link text</a>
</div>




The CSS:
#loginbutton,
#signupbutton {
    display: block;
    height: 40px;
    color: black;
    font-size: 25px;
    text-decoration: none;
    line-height: 36px;
    box-sizing: border-box;
    padding: 1px 0 0 0;
    text-align: center;
    background-color: #FFA319;
    border-radius: 4px;
    margin-top: 30px;
}



Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: Getting buttons on the same line

#2 nandureddy  Icon User is offline

  • D.I.C Head

Reputation: 28
  • View blog
  • Posts: 129
  • Joined: 31-January 11

Re: Getting buttons on the same line

Posted 20 July 2013 - 03:39 PM

Change
display: block;
to
display: inline;
.

This post has been edited by nandureddy: 20 July 2013 - 03:40 PM

Was This Post Helpful? 1
  • +
  • -

#3 Hiatus  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 27-May 09

Re: Getting buttons on the same line

Posted 20 July 2013 - 03:56 PM

View Postnandureddy, on 20 July 2013 - 04:39 PM, said:

Change
display: block;
to
display: inline;
.


Oh wow! Easy fix! Thank you so much!

I thought the block was needed for the buttons to have that nice full look.

Now that they're in line, do I just mess with padding and wahtnot to get desired look of the button?

And on a side note, does block just fill out the entire "row"? And thats the reason why setting display: block makes the button look nice?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,180
  • Joined: 08-June 10

Re: Getting buttons on the same line

Posted 21 July 2013 - 12:29 AM

Quote

And on a side note, does block just fill out the entire "row"?

of course, thatís a core property of block elements. (or would you like a text block (<p>) wrap after each word?)


Quote

And thats the reason why setting display: block makes the button look nice?

depends on what you understand by "nice".
Was This Post Helpful? 0
  • +
  • -

#5 Hiatus  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 81
  • Joined: 27-May 09

Re: Getting buttons on the same line

Posted 21 July 2013 - 07:28 AM

Sorry for my vague responses haha

In essence, I wanted 2-3 buttons side by side that have the "block" element to them.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3530
  • View blog
  • Posts: 10,180
  • Joined: 08-June 10

Re: Getting buttons on the same line

Posted 21 July 2013 - 11:44 AM

doesnít work. block elements always have a line break after them (thatís the definition of a block element), so you canít have block elements side by side.

the most you can have is inline-block elements (elements that have properties of inline and block elements).
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1