0

<h1>左上に見出し、右上に水平方向のリストを含む Web ページがあります。どちらの要素にも幅は指定されていません。修正できないように見える問題は、コンテンツが<h1>長くなりすぎた場合にラップしたいということです。しかし、コンテンツが長くなると、リストが次の行に押し下げられます。助けていただければ幸いです。

できれば、次のマークアップを使用したいと思います。

<div>
    <h1><a href="#">A header which should wrap and leave the list unaffected</a></h1>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

ポジショニングには、現在次のスタイルを使用しています。

h1 {
    margin:0;
    padding:0;
    float:left
}

ul { float:right }

li {
    float:left;
    list-style-type: none
}

誰かがそれによって助けられる場合に備えて、私はフィドルを作成しました: http://jsfiddle.net/Sj5SW/

4

1 に答える 1

1

これはjsfiddleで機能します

更新されたコード:

h1 {
    margin:0;
    padding:0;
}

ul { float:right }

li {
    float:left;
    list-style-type: none
}


<div>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <h1><a href="#">A header which should wrap and leave the list unaffected</a></h1>
</div>
于 2013-07-25T19:48:01.010 に答える