Simple CSS: How to fix display:inline issue


Tags: css,inline

Problem :

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;
}


Solution :

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;
}

    CSS Howto..

    How can i make an arrow triangle using CSS without any cut in the side i.e. smooth sides?

    How do I use CSS to add a non-rectangular border around an image?

    how to get css highlighting and hinting for php files in dreamweaver that are being read as css files?

    How to make a full page header?

    Fuelux, how to fix the width of a repeater column

    2 Sidebar Columns Layout (How)?

    how to get 2 div's text to align along the bottom?

    CSS Mega Menus: How to target ul's except those in divs

    How to “comment out” CSS code from JavaScript?

    how to hide the content of the div in css

    How does positioning work in HTML/CSS?

    How to prevent text style defaults during CSS transition

    How simple CSS breadcrumbs work

    CSS float property shows no height?

    How to break CSS inheritance?

    How to skip first N elements with CSS or jQuery?

    How can I flip multiple div at same time?

    How to structure elements in jQuery Mobile

    how to stop jquery change css of all the divs onhover of a single div

    How to make a unique line thinner using NVD3

    How to avoid CSS interference in an HTML page

    How to achieve following graphics via css

    how to use .css to add an address to the end of every .html page?

    How to detect if browser support specified css pseudo-class?

    How to design a CSS for floating confirm dialog centered on the visible portion of a page?

    Bootstrap dropdown div not showing in non-collapsed view

    How to fit content of a DIV with fixed height

    JavaFX - Where is the css file for definition of StageStyle located or how can I change it?

    How do I install and use Groundwork CSS

    How to change dropdown submenu second level background?​