圖像沒有出現在div內

-1

我在我的網站上創建了一個導航欄，我希望我的標誌在導航欄內顯示在我的網站名稱旁邊，但它不想合作。在下面的代碼是我的導航欄內的圖像的HTML。圖像沒有出現在div內

下面是我的CSS看起來像。我嘗試了所有不同的位置類型，並試圖設置navimage的邊距和填充。

.navbar { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #2ecc71; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
#navtitle { 
 
    color: white; 
 
    font-family: cursive; 
 
    font-size: 25px; 
 
    position: relative; 
 
    top: 20; 
 
    margin-top: 10px; 
 
    margin-left: 40px; 
 
} 
 
#navimage { 
 
    position: absolute; 
 
    margin-top: 0px; 
 
    margin-left: 140px; 
 
}

<div class="navbar"> 
 
    <p id="navtitle">Rainforest</p> 
 
    <div class="navimage"> 
 
    <a> 
 
     <img src='http://i.imgur.com/Eqbvkgb.png'> 
 
    </a> 
 
    </div> 
 
</div>

任何想法？

來源

2015-11-04 Jbur43

您的position: absolute可以防止您想要的圖像出現，請嘗試刪除此圖像並添加display:block，以便元素顯示爲彼此相鄰。您可能需要更改圖像的CSS以使其更小。

來源

2015-11-04 18:12:47 TheoretiCAL

嘗試類似這樣的事情。此外，圖像大於50像素，因此它會自動進入導航欄下方，因爲它無法放入內部。此外，你有navimage標題設置爲在你的HTML類，但它的書面作爲一個ID在你的CSS。 ID與＃和類應該是.navimage

.navbar { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #2ecc71; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#navtitle { 
 
float: left; 
 
} 
 
.navimage { 
 
float:left; 
 
}

<div class="navbar"> 
 
    <div id="navtitle"><p>Rainforest</p></div> 
 
    <div class="navimage"> 
 
    <a> 
 
     <img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20"> 
 
    </a> 
 
    </div> 
 
</div>

來源

2015-11-04 18:24:18 CHoltzman

理念：

使用float property。

驗證碼：

使用float:left;的導航欄和elements.This將使他們能夠相互重疊。
使用position來定位它們。

注：我給了img本身。它總是更容易操縱圖像直接

.navbar { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #2ecc71; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    float:left; 
 
} 
 
#navtitle { 
 
    color: white; 
 
    font-family: cursive; 
 
    font-size: 25px; 
 
    position: relative; 
 
    top: 20; 
 
    margin-top: 10px; 
 
    margin-left: 40px; 
 
    float: left; 
 
} 
 
#navimage { 
 
    position: absolute; 
 
    
 
    margin-top: 0px; 
 
    margin-left: 140px; 
 
    float:left; 
 
    
 
} 
 
#logoimg{ 
 
    height: 50px; 
 
    position: absolute; 
 
    left: 2px; 
 
    }

<div class="navbar"> 
 
    <p id="navtitle">Rainforest</p> 
 
    <div class="navimage"> 
 
    <a> 
 
     <img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'> 
 
    </a> 
 
    </div> 
 
</div>

來源

2015-11-04 18:27:39

最簡單的方法是把圖像的段落內。

<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>

尺寸爲所需要的圖像。

來源

2015-11-04 18:30:44 Rob

感謝羅布。這結束了工作。 – Jbur43

您設置absolute定位continer的，所以你應該這樣做：

.navbar { 
    width: 100%; 
    background-color: #2ecc71; 
    z-index: 1; 
    position: absolute;top:0;left:0; 
} 

#navtitle { 
color: #FFF; 
font-family: cursive; 
font-size: 25px; 
margin-left: 10px; 
position: relative; 
    margin-top:10px; 
} 
#navimage, img { 
    display:inline; 
    float:left; 
    width:30px; 
    height:40px; 
    padding:10px 
}

http://jsfiddle.net/u3upgedx/

來源

2015-11-04 18:32:53 holden

圖像沒有出現在div內

回答

相關問題