float step-down issue

  • Trying to create a horizontal row of buttons. Copied code from this page: https://www.w3schools.com/howto/howto_css_button_group.asp

    but the buttons “step down” instead of lining up across in a row.

    Put this in my theme’s child css page:

    /*Format button group*/

    .btn-group button {
    float: left;
    display: block;
    vertical-align: bottom;
    background-color: #dddddd; /* Green background */
    border: 1px solid #333333; /* Green border */
    font-size: 1.2em;
    color: #dark gray; /* White text */
    padding: 15px 30px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    }

    display: inline; /* Prevents “stepdown” */

    /* Clear floats (clearfix hack) */
    .btn-group: after {
    content: “”;
    clear: both;
    display: table;
    }

    .btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
    }

    /* Add a background color on hover */
    .btn-group button:hover {
    background-color: #3e8e41;
    }
    /*END Format button group*/

    and used this code:

    <div class=”btn-group”>
    <button>Hello</button>
    <button>Samsung</button>
    <button>Sony</button>
    <button>Apple</button></div>

    Any ideas?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • the editor has added <br /> tags between the lines;
    see the code from the browser:

    <div class="btn-group">
<button>Hello</button><br />
<button>Samsung</button><br />
<button>Sony</button><br />
<button>Apple</button></div>

    one way to get all into one line could be to add this CSS:

    .btn-group br { display: none; }

    or try to type your code like this:

    <div class="btn-group"><button>Hello</button><button>Samsung</button><button>Sony</button><button>Apple</button></div>
Viewing 1 replies (of 1 total)
  • The topic ‘float step-down issue’ is closed to new replies.