SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    1 Post(s)
    0 Thread(s)

    New line only on complete list item

    OOPS -- figured it out. (Only needed to change the li display: inline; to display: inline-block

    But here is the original post.

    Each of the 17 list items in my php generated list contains an input element and a label element (see code below) that I display: inline;

    In Google Chrome (Version 33.0.1750.117 m), resizing the screen often causes a new line to break between the input and the label (which also disrupts the columnar alignment). What I prefer is that the entire list item would start a new line.
                        <fieldset id="countsset">
                                    <input id='aqua' name='aqua' type='text'  class='digits' value='0' />
                                    <label for='aqua' class='aqua'>:&nbsp;aqua</label>
                                    <input id='black' name='black' type='text'  class='digits' value='0' />
                                    <label for='black' class='black'>:&nbsp;black</label>
    and so on
    And here is the css snippet
            #countsset label {
                width: 5em;
                display: inline-block;
            input {
                text-align: center;
                margin-left: 0.6em;
            li {
                font-weight: bold;
                font-style: Ariel;
                font-size: 16px;
                list-style: none;
                display: inline;
    and so on.
    I'm open to using float, but wonder if there isn't something simpler.


    Last edited by Grnadpa; Mar 4, 2014 at 10:36. Reason: Answered my own question


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts