0

メニューバーとそのコンテンツを以下のように作成したいのですが、コンテンツが他の下に表示されています:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div class="menuheader"> Facebook, Twitter, Youtube </div>
<div class="menu">
    <ul>  Home </ul>
    <ul> About Us 
        <li>  Establishment </li>
    </ul>
    <ul>  Careers  
        <li>  Current Openings  </li>
        <li>  Working with us  </li>
        <li> Work Culture  </li>
    </ul>
    <ul>  Contact Us  </ul>
</div>

CSS:

.menu{
    background-color:#999999;
    color:#FFFFFF;
    width:940px;
    height:50px;
    margin:20px;
    padding:20px;
    font-size:12px;
    float:left;
}
4

2 に答える 2

1

float:left は機能していますが、右に 20 ピクセルのパディングが問題を引き起こしています。私はあなたのためにフィドルを作りました、http://jsfiddle.net/tsJ7r/1/ 変更：

  padding:20px;

に：

padding:0px;

そしてそれはうまくいくはずです。パディングを左以外のすべての側面に配置したい場合は、次を使用できます

padding-top:20px;
padding-bottom:20px;
于 2013-02-17T14:12:49.967 に答える
1

順序付けられていないリストのマークアップが正しくありません。次のようなことを試してください：

<ul class="menu">
    <li>Home</li>
    <li>About Us</li>
    <li>Careers
       <ul>
           <li>Current Openings</li>
           <li>Working With Us</li>
           <li>Working Culture</li>
       </ul>
    </li>
    <li>Contact Us</li>
</ul>

次に、CSS は次のようになります。

ul.menu {
    float: left;
}

ul.menu li {
     float: left;
     padding: 20px;
     // etc.
}
于 2013-02-17T14:20:42.267 に答える