0

サブタイトルとして使用されている段落の横に順序付けられていないリストを作成しようとしていますが、リストは 1 つのアイテムのサイズに押しつぶされ、アイテムは互いに積み重ねられます。

また、両方を同じレベルに並べて、それぞれヘッダー要素の左右に配置したいと思います。

これが私がこれまでに得たものです。積み上げられたリストと、それらを並べて表示する試みを見ることができますが、これを行うためのより良い方法があると確信しています.

これは、サブタイトルとリストを同じレベルにしようとしたものです（jsfiddleも見てください）：

.subtitle {
    ..
    margin-top: -40px;
    ..
}

ありがとう。

4

2 に答える 2

0

だけを浮かせてはいけませんli。インライン化して右pにフロートする必要がありますhttp://jsfiddle.net/Zz6Xs/12/nav

nav {
   float: right; 
}

.subtitle {
    display: inline;
    ...

nav ul {
    margin-top: 0;    
}

ほとんどの HTML 要素に適用される既定のパディングとマージンの設定があり、それらはブラウザーごとに異なります。多くの人がCSS リセットシステムを使用して、ブラウザ間で一貫したルック アンド フィールを実現しています。あなたが持っていたのと同じように、この例を参照してください。ただし、マージンを自分でリセットする必要があります

float を使用するよりも優れているのは、HTML 5 を使用できる場合、フレックスボックスモデルです。navp

CSS

section {
     display: box;  
     box-orient: horizontal;    
}

nav  {
      box-flex: 1;
      text-align: end;
}

HTML

<section>    
    <p class="subtitle">Subtitle </p>
    <nav><ul>
        <li class="menu">Item 1</li>
        <li class="menu">Item 2</li>
        <li class="menu">Itemmm</li>
    </ul></nav>
</section>
于 2013-04-13T08:42:10.953 に答える
0

また、負のマージンを削除し、要素のパディングとマージンをゼロにしてみてください。

header {
    width: 50% ;
    margin:0 auto;
}

h1 {
    font-size: 50px;
    color: #33B5E5;
}

h1,p,nav,ul{
        padding:0;
    margin:0;
}

.subtitle {
    color: #33B5E5;
    float:left;
    width:20px
}
ul{
    float:right;
}

.menu {
    display: inline;
    width: 20%;
}
于 2013-04-13T08:56:39.110 に答える