0

私はサイト上のいくつかの既存のソリューションを見て試しました (たとえば、CSS Problem to make 2 divs float side by sideとCSS layout - Aligning two divs side by side )。しかし、どれもうまくいきません。

私は CSS の初心者ですが、WordPress サイトhttp://photography.stuartbrown.name/のタイトルとメニューをhttp://www.kantryla.net/と同様の方法で揃えようとしています。 . メニュー領域で float:right を実行すると、メニューが画像の下に消え、float:left がメニューに表示されるたびに、画像が右に押し出されます。

私が望むものを達成するためには、サイトのタイトルのサイズを縮小し、メニューの幅を縮小する必要があることを知っています (おそらく、リスト内の項目間のギャップを縮小することによって?)。 kantrylaのタイトルとメニューレイアウトを実現する方法についてのアドバイス。

DIV を含めるようにテーマの PHP を編集したことに気付くかもしれません。

<div class="stuart_menu">

タイトルとメニューの両方を囲み、囲まれたアイテムを制御しやすくすると考えています。それが正しいかどうかはわかりませんが、必要に応じて簡単に削除できます。

助けてくれてありがとう！

4

4 に答える 4

2

これらのスタイルを CSS に配置します

#logo {
    float: left;
    margin: 0 0 25px;
    position: relative;
    width: 20%;
}

#logo h1 {
    color: #555555;
    display: inline-block;
    font-family: "Terminal Dosis",Arial,Helvetica,Geneva,sans-serif;
    font-size: 25px;
    font-weight: 200;
    margin-bottom: 0.2em;
}

#menu {
   float: left;
   width: 80%;
}

.stuart_menu {
  overflow:auto;
}

それだけだと思います。

于 2013-09-19T08:42:07.317 に答える
0

#logoを含めるように変更するだけfloat: left;で、メニューにロゴが表示されます。その右側になります。コンテナ内に収まるように、ロゴとメニューの両方のサイズを小さくするだけです。また、他の答えもうまくいくはずです。

于 2013-09-19T08:09:16.297 に答える
0

メニューはちょっとめちゃくちゃです。すべての（不要な）要素、クラスで意味がわかりません。

しかし、基本的には正しい道を進んでいます。メイン要素 (ロゴとメニュー) の両方のサイズを縮小して、親 div 内に収まるようにする必要があります。

たとえば、次のようにします。

HTML

<div class="stuart_menu">
    <div class="logo">logo</div>
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">Delicious</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Google+</a></li>
        <li><a href="#">FOAF Description</a></li>
    </ul>
</div>

CSS:

.stuart_menu {
    width: 600px;
}
.logo {
    width: 150px;
    background: red;
    float: left;
}
.nav {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    float: left;
}
.nav li {
    display: inline-block;

}

このデモもチェックしてください。

メニューをロゴの横に配置するか ( を使用float: left)、親の右側に配置するか (フロートを右に変更) を選択できます。

于 2013-09-19T07:55:10.377 に答える