CSS将文本分布在两行上并垂直对齐

Question

I am trying to achieve a layout like the image in the link below. It's basically a set of list items that contain some text and then a large number to the right. I am wondering if it would be possible to distribute the text where it's outputted over 2 lines even though there is no fixed width on the list item elements

Additionally, i am looking for a cross browser solution to vertically align the text and the numbers inside the LI. It needs to work in IE7+ without any javascript

Answer 1

Try this

<ul>
<li>
    <div class="top">To</div>
    <div>For Submit<span class="number">50</span></div>
    </li>
<li>
    <div class="top">To</div>
    <div>For Submit<span class="number">50</span></div>
    </li>
<li>
    <div class="top">To</div>
    <div>For Submit<span class="number">50</span></div>
    </li>    
<ul>

CSS

ul {
list-style:none;
font-size:14px;
margin:0;
padding:0;
}

ul li {
background-color:gray;
display:inline-block;
padding:5px 10px;
}

.number {
margin-left:10px;
font-size:20px;
}

JS Fiddle Demo

Answer 2

First solution: navigation bar

I think that you need basically a navbar.

Twitter Bootstrap navbar is the best thing you can chose I say. See the documentation .

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

See live example: JSFIDDLE .

Second solution

Also, you can use row s and span s.

Documentation is here .

Example:

<div class="row">
    <div class="span1">Text 1</div>
    <div class="span1">Text 2</div>
    <div class="span1">Text 3</div>
    <div class="span1">Text 4</div>
    <div class="span1">Text 5</div>
    <div class="span1">Text 6</div>
</div>

JSFIDDLE