css - CSS 居中标题到 li 的一侧

Question

我的问题很难用语言来描述，所以我拍了一张我所追求的照片：

http://p.twimg.com/Aq4o04vCMAEdhdD.jpg

我不能让它.title自己坐在一条线上，描述愉快地包装。

这是我正在使用的结构的小提琴 - http://jsfiddle.net/rEpgB/2/

任何指针将不胜感激:)

边注

如果您想知道，我使用http://hipsteripsum.me/作为我的虚拟文本...

Answer 1

为什么不给你一个<hx>标签，因为这就是他们的目的？它解决了您的问题并且在语义上是正确的：

<ul>
    <li class="container">
        <h2>Title Is Here</h2>
        <span class="description">Cred vice synth cliche, salvia banksy chambray organic blog. Quinoa organic fap 8-bit, fingerstache butcher gastropub vinyl.<span>
    </li>

    <li class="container">
        <h2>Another title</h2>
        <span class="description">Authentic 8-bit messenger bag PBR master cleanse, organic fanny pack beard raw denim etsy.<span>
            </li>
</ul>


li.container {
    float: left;
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}

h2 {
    font-size: 1.3em;
}

span.description {
    color: #888;
}​
​

Answer 2

这是一个固定的小提琴

我所做的只是在以下位置添加一个新的 float 元素span.title：

li.container {
float: left;
border: 1px solid black;
padding: 10px;
margin: 10px;
}

span.title {
    font-size: 1.3em;
    float: left; // added this float
}

span.description {
    color: #888;
}​

Answer 3

好的，然后使用这个http://jsfiddle.net/rEpgB/25/

<ul>
    <li class="container">
        <div class="title" style="">Title Is Here</div>
        <div class="description" style="">Cred vice synth cliche, salvia banksy chambray organic blog. Quinoa organic fap 8-bit, fingerstache butcher gastropub vinyl.<div>
    </li>

    <li class="container">
        <div class="title" style="">Another title</div>
        <div class="description " style="">Authentic 8-bit messenger bag PBR master cleanse, organic fanny pack beard raw denim etsy.<div>
            </li>
</ul>
​
li.container {
    float: left;
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    width:90%
}

.title {
    font-size: 1.3em;
    display: table-cell; white-space: nowrap;
    padding-right: 5px;
}

.description {
    color: #888;
    display: table-cell;
}

.float-left {
float: left;
}​

Answer 4

除非您必须使用 span 作为包装器。您可以只使用<h1>, <h2>etc. 标签，它会为您破坏。

改变

<span class="title">title</span>`

至

<h1 class="title"></h1>`

然后将您的CSS更改为

h1.title {
    font-size: 1.3em;
    text-align:center
}

Answer 5

最佳解决方案：http: //jsfiddle.net/rEpgB/17/

不要将“宽度”与左右填充一起使用，这是一条规则。