0

CSSメディアクエリを含むページがあり、これを行うように要求されました。

モバイルレイアウト： モバイルレイアウト

デスクトップレイアウト： デスクトップレイアウト

これで、HTMLコードは次のように配置されます。

<div id="content">
  <h1>the title</h1>
  <p>this is the tagline of the site</p>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</div>

デスクトップレイアウトを実現しようとすると、かなり問題が発生します。でラッピング<h1>し<p>て<div>スタイルを設定しfloat: leftてみましたが、要求どおりに表示されませんでした（タグラインの幅が広くなっています）。私も試してみposition: absoluteましたが<ul>、要求どおりに見えませんでした（#content幅を広くすることはオプションではありません）。

javascriptを使用せずにこれを達成するための提案はありますか？

アップデート：

コードをKodingにアップロードしたので、実際に何をしているかを確認できます。これはCSSです。normalize.cssも使用しています。

私が今抱えている問題は、さまざまなブラウザが何を表示するかです。 ブラウザが表示するもの

ブラウザがタグラインの幅をどのように計算するかが問題だと思いますが、コードを試してみると、タグラインのテキストを短くすると、Operaのレンダリングのように見えます。

バグに遭遇したことがありますか、それともCSSに誤りがありますか？

4

3 に答える 3

1

およびで使用float: leftします。ではありません。その後、幅を100％に設定し、上マージンをに設定します。<h1><p><ul><p><ul>

すべてを<li>並べて表示するには、それらをに設定しますdisplay: inline。

于 2012-09-27T22:43:40.137 に答える
0

ulを並べて保持するのに十分なスペースがあることを確認してliください。

width: 1million px;
于 2012-09-27T22:32:30.883 に答える
0

それほどエレガントではありませんが、このようなことを試すことができます...

CSS

h1, ul, li {
    float: left;
}
h1 {
    height: 48px;
}
p {
    position: absolute;
    margin-top: 48px;
}
ul {
    padding-top: 12px;
}

jsFiddle

于 2012-09-27T22:55:27.423 に答える