css - liの横にあるCSS中心のタイトル

Question

私の問題を言葉で説明するのはかなり難しいので、私は自分が何を求めているのかを写真に撮りました。

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

.title説明が楽しく折り返されているので、私はそれだけで列に座ることができません。

これが私が取り組んでいる構造のフィドルです-http://jsfiddle.net/rEpgB/2/

任意のポインタをいただければ幸いです:)

サイドノート

疑問に思っている場合は、ダミーテキストにhttp://hipsteripsum.me/を使用しました...

score 2 · Accepted Answer

彼らがそこにいるので、なぜあなたに<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;
}

score 2 · Accepted Answer

これが固定フィドルです

私がしたのは、span.title：に新しいfloat要素を追加することだけでした。

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;
}

score 1 · Accepted Answer

では、この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;
}

score 0 · Accepted Answer

ラッパーとしてspanを使用する必要がある場合を除きます。<h1>、<h2>などのタグを使用するだけで、壊れてしまいます。

変化する

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

に

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

次に、cssをに変更します

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

score 0 · Accepted Answer

最善の解決策：http：//jsfiddle.net/rEpgB/17/

右または左のパディングで「幅」を使用しないでください。これは原則です。

css - liの横にあるCSS中心のタイトル

5 に答える 5

Related

Reference