How can I write in CSS if I'm using list tag for this? [closed]


Tags: html,css,css3

Problem :

I'd like to make the Tags list just like this below.
Then I want to use CSS and list tag.

How can I make that?

Tags: Apple Banana Melon Strawberry Kiwi Orange 
      Pineapple Carrot Onion Tomato Bacon Sandwitch
      SoyBeans Pork Beef Chicken 


Solution :

http://jsbin.com/ojives/2

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
    h1 { font-weight: normal; font-size: 100%; }
    aside { display: table; }
  aside h1 span:after { content: ":"; }
    aside h1,
    aside ul { display: table-cell; }
    aside li { display: inline; }
</style>
</head>
<body>
  <aside>
    <h1><span>Tags</span></h1>
    <ul>
        <li>Apple
        <li>Banana
        <li>Melon
        <li>Strawberry
        <li>Kiwi
        <li>Orange 
        <li>Pineapple
        <li>Carrot
        <li>Onion
        <li>Tomato
        <li>Bacon
        <li>Sandwitch
        <li>SoyBeans 
        <li>Pork
        <li>Beef
        <li>Chicken 
    </ul>
  </aside>
</body>
</html>

    CSS Howto..

    htmlAttributes: How do I add a CSS class rule for the below?

    How can I get the dots that surround some elements to go away/become solid lines?

    How to use relative/absolute paths in css URLs?

    How to make sidebar horizontal for xs devices

    How can I render country flags as a ribbon, using CSS only?

    How to stop image shrinking when page is resized horizontally in CSS

    How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?

    How should I convert this object from .PSD to HTML/CSS?

    How to add focus on label css style

    How do I keep an element from pushing another element in CSS?

    How to center absolute position element in my case

    How to increase the distance between table columns in html?

    How to make blur effect without white light?

    HTML/CSS: How to center floating divs?

    How to target items

    How to rotate a div

    How to add text or characters using CSS (no javascript)?

    How to remove “left” value bootstrap popover

    How to add css to a HTML div which has no class or id

    How to achieve this simple 3 column css layout

    How to combine font-awesome and CSS triangles?

    How can I do width = 100% - 100px in CSS?

    How can I align text to the top and the bottom of the same div css?

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    How do you right-align text into a column?

    How to enable auto indentation in lists and list items?

    How to select a div with specific css property

    Ask Toolbar preventing Bootstrap Modal to show

    How can I select second element and after that in CSS?

    Show and remove “No Record Found” message in jqgrid 4.6.0