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 do you override CSS applied by jQuery UI theme properly?

    HTML5/CSS3 how to force text to require a certain width for rendering

    How to generate assets that match the html file of a rails application?

    How to add css and js files on node pages independent of the theme?

    How to create shaded divs like this with CSS

    CSS how to align elements inside a div with 2 columns

    CSS Sub Menu shows up outside body

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    how to load a css for Safari only?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    How can i make a div to slide in from right side to left?

    How to use nav-pill with nav-justified from bootstrap3x without responsive features

    How to check if an element matches the :empty pseudo-class in pure JS?

    How can I make a DIV element Fixed but non-Scaleable?

    Button transition using javascript and css, how to temporarily disable the transition

    How to reference JSF image resource as CSS background image url

    How to write variable with multiple css properties in Sass

    How to control a

    SF2 how to import css / js?

    how do i fit background image to any screen?

    How put some horizontal offset to an element bottom border with CSS?

    How to centre text as CSS content attribute vertically and horizontally?

    How to center a paragraph of text on a particular word in HTML, CSS, or JavaScript?

    How to make float : left work same as table-cell?

    how to make header title with buttons

    How to position some text?

    What is a CSS Parse error and how do I fix it?

    How to center FontAwesome icon in css before content vertically

    Show required asterisk star after the text?