How to style this with css? [closed]


Tags: html,css,html5,css3,web

Problem :

Wondering what is the best way to style this with css? I know float could make it happen but I don't think it is a good idea.

Love  Love is a variety of different feelings, 
      states, and attitudes that ranges from
      interpersonal affection to pleasure.

Day   A day is a unit of time. In common
      usage, it is an interval equal to 24 
      hours.

.

<li>
    <span>Love</span>
    <span>Love is a variety of different feelings, states, and attitudes that ranges from interpersonal affection to pleasure.</span>
</li>
<li>
    <span>Day</span>
    <span>A day is a unit of time. In common usage, it is an interval equal to 24 hours.</span>
</li>


Solution :

By using the wonderous display:table-* options:

li {
    display:table-row;
}
li > span {
    display:table-cell;
    padding:3px;
}

As seen on jsfiddle

And gives this:

enter image description here


    CSS Howto..

    How to align links on top of each other inside of a box with CSS?

    CSS how to target element beside my current element?

    How to highlight an image after selection using css or jquery? [closed]

    how can I make a frame made with css be over a div and when changing the width does not affect the content of the div, only the width of the frame?

    Css selector : How to reference a attribute inside a div

    Google Share button not showing properly if originaly hidden

    how to remove the css overflow:hidden of jquery dialog

    How do I customise the style of the Auth0 lock control?

    How to change the color of numbers in ordered list without using counter in css? [duplicate]

    How to change label color with html and CSS without js?

    How to make two separate, independent columns (using html and css)

    how can i add a css file to body of a page?

    How to change Fancybox preloader image?

    How to prevent content from being pushed down on appearance of floating menu in mobile display

    How to keep a flex item from overflowing due to its text?

    CSS Matrix - how to achieve percentage translation

    how to make CSS animation to play every 10 seconds

    How to create the corner that show in picture with css in webpage?

    how to disable the highlighting view on selection either in html or css?

    How to use metro css with codeigniter?

    How to only make the opacity lower for the background and not the text in it?

    How to remove “gap” from nav bar and line?

    how to decrease space between headings?

    show image in aspect ratio and all image size same height and width

    How to do a “true” carbon fiber CSS background

    How to make rounded corner cut-out using CSS?

    CSS & HTML & JQuery - How to display a div OVER other divs and set to them a shady background

    How to add CSS AnimationEnd event handler to GWT widget?

    how to resolve border-radius property issue in all versions of browsers? [duplicate]

    How to make 1 css value dependent on another?