0
最後のWebページを作ってからしばらく時間がありましたが、私は忘れてしまったようです。私は#menu ulが最後の項目を次の行に移動する理由を解決できませんが、＃menu divはすべてのリスト要素とロゴdivを含むのに十分な幅を持ち、マージンとパディングが0に設定されています。 このような方法でメニューが表示されます 私は解決策を探しましたが、私はそれを正しく働かせることはできません。CSS - ulの項目が1行にない
質問は1行にありますか？ 850ピクセルのオーバーラップが発生すると、全体が802ピクセル幅になるはずです。
html, body {margin:0; padding:0}
body {background-image: url("./gfx/background.png"); background-position: 50%; background-repeat: no-repeat;text-align:center; background-color:#fff; font-family:Arial, Helvetica;width:100%}
.main-wrap {width:1000px; margin:0 auto}
#header {height:150px;width:1000px}
#logo {
\t display: block;
\t width: 150px;
\t height: 150px;
\t overflow: hidden;
\t color: #424242;
float:left;
margin: 0;
padding:0;
}
#logo span {
\t background: url("./gfx/logo-small.png");
\t z-index: 5;
\t display: block;
\t width: 150px;
\t height: 150px;
}
.wrap::before {
content: " ";
display: table;
}
.wrap::after{
clear: both;
content: " ";
display: table;
}
/*menu*/
#menu {width:849px;margin:0 0 0 0; padding:0px 150px 0 0}
#menu ul li {list-style: none;}
#menu ul li a {
\t z-index: 5;
\t position: relative;
float:left;
\t display: inline;
\t height: 31px;
\t overflow: hidden;
\t text-decoration: none;
color:#336699;
font-size: 20px;
margin: 0;
padding:0
}
#menu li a:hover,
#menu li a:focus {
\t
height: 31px;
\t margin-top: 0;
color:#fff;
}
#menu li a span {
position: absolute;
\t top: 0;
\t left: 0;
\t display: block;
z-index: -1;
\t height: 31px;
\t cursor: pointer;
}
#menu li a:hover span,
#menu li a:focus span {
\t background: url("./gfx/menu-a.png");
\t background-repeat: no-repeat;
color:#fff;
}
#menu-1,
#menu-1 span {
\t background-position: 0 0;
\t width:119px;
}
#menu-1:hover span,
#menu-1:focus span {
\t background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
\t width: 112px;
}
#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
\t background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
\t width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
\t background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
\t width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
\t background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
\t width: 149px;
}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
\t background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
\t width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
\t background-position: -692px 0px;
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New web</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="main-wrap"> <!-- hlavni -->
<div class="wrap">
<div id="header">
<div id = "logo"><a href = "new_web/">
<span> </span>
</a></div>
<div id="menu">
<ul>
<li><a id="menu-1" href="new_web/about-us.html">About Us<span></span></a></li>
<li><a id="menu-2" href="new_web/services.html">Services<span></span></a></li>
<li><a id="menu-3" href="new_web/insurance.html">Insurance<span></span></a></li>
<li><a id="menu-4" href="new_web/meet-our-team.html">Meet Our Team<span></span></a></li>
<li><a id="menu-5" href="new_web/latest-news.html">Latest News<span></span></a></li>
<li><a id="menu-6" href="new_web/contact.html">Contact<span></span></a></li>
</ul>
</div>
</div>
</div>
<div id = "slider">
</div>
<div id = "main">
<!-- first page only -->
<div class="wrapper">
<div id="smart-boxes">
<div id="smart-box-1">
<p>"Change your thoughts and you chagne your world." <span>Norman Vincent Peale</span>
</p>
</div>
<div id="smart-box-2">
<p>High quality psychological services <a>read more...</a>
</p>
</div>
<div id="smart-box-3">
<p>We are a multidisciplinary treatment center <a>read more...</a>
</p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div id="footer-address">
<p>
</p>
</div>
<div id = "footer-links-1">
<p>
<a href= "">Contact Us</a><br />
<a href= "">FAQ</a> <br />
</p>
</div>
<div id = "footer-links-2">
<p>
<a href= "">Terms of use</a><br />
<a href= "">Insurance</a><br />
<a href= "">Our Team</a><br />
</p>
<p class="ext-links">
</p>
</div>
</div>
</div>
</div>
</body>
</html>あなたのアドバイスをいただき、ありがとうございます。