Search code examples
htmlcsslayout

How Do I Ensure Buttons Stay on Separate Lines?

I am currently designing a website with multiple choice boxes. My layout looks like this: Example Boxes

When I shorten the text string, my buttons end up on the same line. I'd like to keep each button on a separate line, regardless of string length. Here is the code I used to create the buttons:

.button {
  background-color: #722F37;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
}
    <div id="quiz" align="center">
       <button class="button">Option A will go here. Option A will go here.</button>

Thanks.

Solution

  • I'd suggest a few things.

    • Remove the align attribute from your div elements. Style (such as horizontal alignment) should not be written directly into your HTML elements, but should be inferred using style sheets. Instead give these div elements a descriptive class, such as "buttonBlock" and then add to your CSS definition the following: div.buttonBlock {text-align: center}

    • Remove the display: table-cell property from your CSS for your button elements. Table formatting has a very specific purpose (tabular data structuring) and should not be used for general layout. Removing the display property will cause your button elements to default to display: block which will put each one on its own line, solving your problem.

    • Remove the class="button" attribute from your button elements. You can instruct your CSS to target button elements simply by their element name, so duplicating this with a class which repeats the same name is unnecessary. Instead, if you want to target just specific buttons, use CSS selectors to target only those buttons found within a div which has class "buttonBlock", as seen in the example CSS below.

    • Add a unique id attribute to each button if you're going to need to target them with JavaScript (adding event handlers, dynamically modifying the labels, etc).

    • You may want/need to add a type and/or value attribute to each button to tell the web browser what its behaviour should be, and what value it will submit if it is part of a form. See the HTML5 Button element specification for full details about what you can specify in a button element.

    Combined you should end up with CSS which looks something like this:

    div.buttonBlock {text-align: center}
div.buttonBlock button {
        background-color: #722F37;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 24px;
        margin: 4px 2px;
        cursor: pointer;
        vertical-align: middle;}

    and HTML which looks something like this:

    <div class="buttonBlock">
    <button id="buttonOptionA">Option A</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionB">Option B</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionC">Option C</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionD">Option D</button>
</div>
<div class="buttonBlock">
    <button id="buttonOptionE">Option E</button>
</div>

    I've just loaded this into a browser and it does place each button on its own line.