無法讓這些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; 
}