Simple CSS: How to fix display:inline issue

Question

Kinda embarrassed asking but I'm fairly new to CSS and I just wanted to add some simple display:inline styling on a HTML list item. The list is composed of varied heading, paragraph, image and link tags and I just cant seem to get them all inline on one row.

This is all the relevant parts of my code, hopefully someone can point out an easy fix.

HTML

<ul>
    <li>
      <h3>Quantity</h3>
    </li>

    <li>
      <p>#</p>
    </li>

    <li><img onclick="addQuantity('itemName')" src="images/plus.png"></li>

    <li>
      <h3>1</h3>
    </li>

    <li><img onclick="minusQuantity('itemName')" src="images/minus.png"></li>

    <li>
      <h2>Add To Cart</h2>
    </li>

    <li>
      <h4><a href="#checkout.html">Checkout</a></h4>
    </li>
  </ul>

CSS

ul {
  list-style-type:none;
}

li {
  display:inline;
}

misterManSam · Accepted Answer · 2014-08-16 23:01:26Z

1

Simple question, simple answer :)

Use inline-block

Have an example!

CSS

li {
  display:inline-block;
}

Now, being CSS, there are numerous ways to achieve the layout you want. Here is a slightly more in-depth example using display: table and display: table-cell. Same HTML.

Have a second example!

CSS

* {
    margin: 0;
    padding: 0;
}
html,body {
    height: 100%;
}
ul {
  list-style-type:none;
    display: table;
    border-collapse: collapse;
    border-spacing: 10px;
    background: #333;
    width: 100%;
}

li {
  display:table-cell;
    background: #DDD;
    vertical-align: middle;
}

edited Aug 16, 2014 at 23:01

answered Aug 16, 2014 at 22:53

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Simple CSS: How to fix display:inline issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related