0

私はこれが非常に単純であることを知っていますが、私はこれに何時間も悩まされてきました..私のヘッダーでは、ロゴとナビゲーションを同じ行に配置したいです...基本的に、私はこのHTMLを持っています:

<div class="menu">
    <div class="ct-header-line"></div>
    <img class="logo" src="images/clinictechlogo.png">
    <ul class="nav">
        <!--common features, coded? or static?-->
        <li class="active"><a href="#" id="homenav">Home</a></li>
        <li><a href="#" id="apptenav">Appointments</a></li>
        <li><a href="#" id="presnav">Prescriptions</a></li>
        <li><a href="#" id="prnav">Patient Records</a></li>
        <li><a href="#" id="billsnav">Bills</a></li>
        <!--special features, coded.....-->
        <li><a href="#">Charts</a></li>
        <li><a href="#">something</a></li>
    </ul>
</div>

ヘッダー部分の CSS の一部を次に示します。

.logo {
    padding: 20px 10px 10px 10px;
    display: inline;
}

.menu {
    background: #4F97BD url(images/headerbg.jpg) repeat;
}

.nav {
    list-style:none;
    margin:0;
}

.nav li {
    display: inline;
}

その結果、ロゴが 1 行に表示され、ul nav が次の行に表示されます...

4

4 に答える 4

2

を与える必要があります<ul> display: inline-block。ロゴの高さが固定されている場合は、オプションがロゴに対して垂直方向に整列して表示されるように<ul>、適切な aを指定することもできます。line-height

于 2013-01-14T09:08:24.440 に答える
1

ロゴに追加してみてください:

.logo {
    float: left; 
    width: 20%; //Or whatever the width is
}

これにより、次のラップアップが作成されます。そうでない場合は、次のようなものを追加する必要があるかもしれません

.nav {
    float: left; 
    width: 70%;
}
于 2013-01-14T09:08:09.910 に答える
0

これをチェックしてください：インラインロゴとナビ

.logoと.navの両方を左にフロートさせ、下部に明確な修正を加えます。

.logo {
  padding: 20px 10px 10px 10px;
  display: inline;
  float:left;
}

.menu {
  background: #4F97BD url(images/headerbg.jpg) repeat;
}

.nav {
    padding: 20px 10px 10px 10px;
    list-style:none;
    margin:0;
    float:left;
}

.nav li {
    display: inline;
}

.clear{
  clear:both;
}

それらを正しく（垂直に）整列させるには、画像で使用していたものと同じパディングをnavに適用します..

お役に立てれば

于 2013-01-14T09:23:50.520 に答える
0

メルクス..

これを試して...

    .logo {
    margin:0;
    padding:0;
    display:inline;
    }

http://jsfiddle.net/vZZDJ/をご覧ください

幸運を...）

于 2013-01-14T11:10:16.260 に答える