Question

自从我制作上一个网页以来已经有一段时间了，似乎我已经忘记了很多。我无法解决为什么#menu ul中的最后一项转到下一行，而#menu div足够宽以包含所有列表元素加上徽标div，它的边距和填充设置为0。以前我以这种方式做菜单，但可能已经忘了。我搜索了解决方案，但我不能让事情正常。

问题是......为什么一行中没有li项目？什么导致850 px重叠，当它们一起应该是802px宽？

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 {

	display: block;
	width: 150px;
	height: 150px;
	overflow: hidden;
	color: #424242;
  float:left;
  margin: 0;
  padding:0;
}
#logo span {
	background: url("./gfx/logo-small.png");
	z-index: 5;
	display: block;
	width: 150px;
	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 {
	z-index: 5;
	position: relative;
  float:left;
	display: inline;
	height: 31px;
	overflow: hidden;
	text-decoration: none;
  color:#336699;
  font-size: 20px;
  margin: 0;
  padding:0
}

#menu li a:hover,
#menu li a:focus {
	
  height: 31px;
	margin-top: 0;
  color:#fff;
}
#menu li a span {
  position: absolute;
	top: 0;
	left: 0;
 	display: block;
  z-index: -1;
	height: 31px;
	cursor: pointer;

}
#menu li a:hover span,
#menu li a:focus span {
	background: url("./gfx/menu-a.png");
	background-repeat: no-repeat;
  color:#fff;
}
#menu-1,
#menu-1 span {
	background-position: 0 0;
	width:119px;

}
#menu-1:hover span,
#menu-1:focus span {
	background-position: 0px 0px;
}
#menu-2,
#menu-2 span {
	width: 112px;
}

#menu li a#menu-2:hover span,
#menu li a#menu-2:focus span {
	background-position: -119px 0px;
}
#menu-3,
#menu-3 span {
	width: 128px;
}
#menu li a#menu-3:hover span,
#menu li a#menu-3:focus span {
	background-position: -231px 0px;
}
#menu-4,
#menu-4 span {
	width: 184px;
}
#menu li a#menu-4:hover span,
#menu li a#menu-4:focus span {
	background-position: -359px 0px;
}
#menu-5,
#menu-5 span {
	width: 149px;

}
#menu li a#menu-5:hover span,
#menu li a#menu-5:focus span {
	background-position: -543px 0px;
}
#menu-6,
#menu-6 span {
	width: 110px;
}
#menu li a#menu-6:hover span,
#menu li a#menu-6:focus span {
	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>

感谢您的建议。

Answer 1

好吧，基本错误：当使用float属性将两个元素放在彼此旁边时，必须有float：left（#logo）而另一个muset向右移动简单添加float：右边#menu做了事情（也删除了） 150px padding-right）。

CSS - ul项目不在一行中

1 个答案: