-1

我正在开发一个网站，但我在容器类中添加滑块的位置被卡住了。

我的滑动条与我的部分重叠，在我的侧边栏添加 margin-top 之后，我的所有标签都得到了 margin-top。

我该如何解决这个问题？

这是我的 HTML 代码：

<body>

<nav class="cf">
    <ul>
        <li><a href="#" class="current">Home</a> </li>
        <li><a href="#">About</a> </li>
        <li><a href="#">Services</a> </li>
        <li><a href="#">Porfolio</a> </li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<div id="container">


        <div class="info1">
                <img src="images/infoicon1.png" alt="icon1">
                <h1>Best services</h1><br>
                <p>We offer you best web solutions for business.</p>
        </div>
<div class="info2">
                <img src="images/infoicon2.png" alt="icon1">
                <h1>Cloud System</h1><br>
                <p>Be unique !! Get cloud system for your business.</p>
        </div>
        <div class="info3">
                <img src="images/infoicon3.png" alt="icon1">
                <h1>Contact us</h1><br>
                <p>Start improving your online business.</p>
        </div>


<div id="s3slider">
<ul id="s3sliderContent">
    <li class="s3sliderImage">
        <img src="wide/6.jpg">
        <span>Your text comes here</span>
    </li>
    <li class="s3sliderImage">
        <img src="wide/2.jpg">
        <span>Your text comes here</span>
    </li>
    <div class="clear s3sliderImage"></div>
</ul>

这是我的CSS代码

body {
  background: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0;

nav {
   background: #333333;
  height: 60px;
  margin-top: 8%;
    }
nav ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;   
  position: absolute;
  left: 30%;}

nav ul li {
  float:left;
  display: inline;
  font-size: 120%;
  padding:16px;
}
nav ul li a {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;}

nav a:link, nav a:visited { 
  color: #ffffff;
  height:60px;}

#container {
  position: relative;
  width: 80%;
  left: 10%;}


#mainHeader {
  margin-top: 1%;
  display: block;}

.info1 {
  position: absolute;
  background: #0088cc;
  width: 30%;
  border-radius: 9px;}

.info1 img {
  width: 30%;
  height: 0 auto;
  float:left;
  margin-top: 1%;}`.info1 h1 {
  float:left;
  margin-top: 1%;
  color: #ffffff;
  margin-left: 8%;`

.info1 p {
  float:left;
  width: 60%;
  margin: 0;
  margin-bottom: 1%;
  padding-left: 3%;}

#s3slider {
  width:98%; /* important to be same as image width */
  height: 300px; /* important to be same as image height */
  position: relative; /* important */
  overflow: hidden;} /* important */



#s3sliderContent {
  width: 98%; /* important to be same as image width or wider */
  position: absolute; /* important */
  top: 0; /* important */
 margin-left: 0; /* important */`

  .clear {
     clear: both;}

例子： 一个链接！

4

1 回答 1

0

因为.info1is position: absolute;and 更好地display:inline-block;用于.info1 h1and.info1 p而不是float:left;. 如果您仍希望将其定位为绝对。给nav/.info1一个margin-bottom: height-of-info1;

制作小提琴以获得更好的解决方案。

于 2013-04-25T00:53:03.943 回答