无法让这些div显示在线

Question

我有一个网站位于here。

我很难在内联中显示一些标签。 HTML中没有中断，也没有明确的属性。这里缺少一些东西，但我不知道是什么。

基本上，我想他们建立这样的...

[logoimage] [滑块] [logotitle]

我已经改变了按百分比滑块大小，并试图在一个新的div包裹一切并添加“嵌入块”属性。

这里是我的HTML ...

<div id="top"> 

    <div id="logo"> 
      <a href="http://dev.mpirebooking.com"><img id="logoimage" src="images/logo_mpire_management.png" width="80" height="56" alt="logo"></a></div> <!-- Logo image --> 

     <section id="slideshow"> <!-- Slideshow Start --> 
     <div class="html_carousel"> 
      <div id="slider"> 
       <div class="slide"> 
        <img src="images/slideshow/sliderimage1.jpg" width="3000" height="783" alt="2 Chainz"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --> 
       </div><!--/slide--> 

       <div class="slide"> 
        <img src="images/slideshow/sliderimage2.jpg" width="3000" height="783" alt="French Montana"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --> 
       </div><!--/slide--> 

       <div class="slide"> 
        <img src="images/slideshow/sliderimage3.jpg" width="3000" height="783" alt="2 Pistols"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --> 
       </div><!--/slide--> 

           <div class="slide"> 
       <img src="images/slideshow/sliderimage4.jpg" width="3000" height="783" alt="Juicy-J"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --> 
       </div><!--/slide--> 

           <div class="slide"> 
       <img src="images/slideshow/sliderimage5.jpg" width="3000" height="783" alt="Kendrick Lamar"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --> 
       </div><!--/slide--> 

           <div class="slide"> 
       <img src="images/slideshow/sliderimage6.jpg" width="3000" height="783" alt="Artist Name"/><!-- Replace these images with your own but make sure they are 3000px wide and 783px high or the same ration --> 
       </div><!--/slide--> 



      </div><!--/slider--> 
      <!--<div class="clearfix"></div>--> 
     </div><!--/html_carousel--> 
    </section> <!-- Slideshow End --> 

     <div id="logo"> 
      <a href="http://dev.mpirebooking.com"><h1 id="logotitle">MPIRE Booking</h1></a> <!-- Logo text --> 
     </div><!--/logo--> 

     <nav> <!-- Navigation Start --> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="booking.html">Booking</a></li> 
       <li><a href="#footer">Contact</a></li>    
      </ul>  
     </nav> <!-- Navigation End --> 

    </div><!--/top--> 

这里是我的CSS ...（你在上面看到的div） （点击here为全面样式表）

#top{ 
    height:20px; 
} 

#logo { 
    margin-top:1%; 
    text-decoration:none; 
    } 

#logo a:hover { color: #8f1929; text-decoration: none; } 

#logoimage{ 
    width:200px; 
    height: 141px; 
    padding-right:10px; 
    float:left; 
} 

#logotitle{ 
    margin-top: 50px; 
    float:right; 
    font-family: Broadway, Arial, Helvetica, sans-serif; 
    font-weight:normal; 
    font-size:200%; 
    text-shadow: 0 1px 1px #FFF; 
    text-decoration: none; 
} 

nav { 
    float:right; 
    width:100%; 
    display:block; 
    height:40px; 
} 

nav ul li{ 
    display:block; 
    width:25%; 
    float:left; 
    text-align:center; 
} 

nav ul li a{ 
    font-family:Lato, Helvetica, Arial, sans-serif; 
    width:90%; 
    text-decoration:none; 
    text-transform:uppercase; 
    font-weight:400; 
    line-height:250%; 
    display:block; 
    color:#FFFFFF; 
} 

nav ul li a:hover{ 
    color:#8f1929; 
} 

nav ul li p{ 
    font-family:Lato, Helvetica, Arial, sans-serif; 
    width:90%; 
    text-decoration:none; 
    text-transform:uppercase; 
    font-weight:400; 
    line-height:250%; 
    display:block; 
    color:#8f1929; 
} 

.html_carousel { 
} 
.html_carousel div.slide { 
    position: relative; 
} 
.html_carousel div.slide img { 
    width: 30%; 
    height: auto; 
    border-radius:15px; 
} 

.clearfix { 
    float: none; 
    clear: both; 
} 

#slideshow{ 
    width:100%; 
    margin-top:0%; 
} 

.clearfix { 
    float: none; 
    clear: both; 
} 

Answer 1

你的代码有几个奇怪的东西，比如很大的宽度属性，例如幻灯片的3000px，甚至<div id="slider">的14326px（！），这些都不会留下标志的空间。请检查他们。

而浮动属性：float:right对于logotitle div是没有意义的。如果它有足够的空间，那么可以使用另一个float:left，因为它是最后一个。

在这里，你有左浮动元素创建水平直列布局为例：www.w3schools.com/css/tryit.asp?filename=trycss_float5

Answer 2

尝试添加此类别

.slide 
{ 
    display:inline-block; 
}