無法將徽標左側浮動導航

-1

我無法讓我的徽標顯示在導航欄的左側。它只出現在中間，導航菜單向下移動。請你能幫助我解決問題並理解我做錯了什麼嗎？無法將徽標左側浮動導航

<!doctype html> 
<html lang="en"> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="css/stylecafe.css"> 
</head> 
<body> 

<div id="contacttop"> 
    <div id="contacttop2"> 
     <div id="phoneemail"> 
      <p><span id="phone">&#9743;</span>&nbsp;012240478624&nbsp;<span id="envelope">&#9993;</span>&nbsp;<a href="#">[email protected]</a></p> 
     </div> 

     <div id="socialmedia"> 
      <a href="#"><img src="img/instagram.png" width="16px" height="16px"></a> 
      <a href="#"><img src="img/googleplus.png" width="16px" height="16px"></a> 
      <a href="#"><img src="img/facebook.png" width="16px" height="16px"></a> 
     </div> 
    </div> 
</div> 

<div id="navwrap"> 
    <nav> 
    <a href="index.html" id="logo"></a> 
     <!--<img src="burger.png">--> 
     <ul> 
      <li><a href="index.html" id="current">Home</a></li> 
      <li><a href="tout.html">Google Tour</a></li> 
      <li><a href="menu.html">Menu&nbsp;&#9660;</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
      <li><a href="whatson.html">What's On</a></li> 
     </ul> 
    </nav> 
</div> 

<div id="banner"></div> 
<section id="info"></section> 
<section id="contactbot"> 
    <form></form> 
    <div id="hours"></div> 
</section> 
<footer></footer> 
</body> 
</html> 

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i'); 
/*--- css reset ---*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
/*--- end css reset ---*/ 
a { 
    color: black; 
    text-decoration: none; 
} 
body { 
    font-family: 'Open Sans', sans-serif; 
} 
#contacttop { 
    width: 100%; 
    background: #f2e8c1; 
} 
#contacttop2 { 
    width: 80%; 
    height: 30px; 
    background: #f2e8c1; 
    margin: 0 auto; 
} 
#phoneemail { 
    width: 50%; 
    float: left; 
} 
#phoneemail p { 
    font-size: .75em; 
    font-weight: 600; 
    line-height: 30px; 
} 
#phone, #envelope { 
    font-size: 1.3em; 
} 
#socialmedia { 
    width: 90px; 
    height: 30px; 
    float: right; 
} 
#socialmedia img { 
    display: block; 
    margin: 7px 0 7px 14px; 
    float: right; 
} 
#navwrap { 
    width: 100%; 
    background: #663200; 
    height: 90px; 
} 
nav { 
    width: 80%; 
    margin: 0 auto; 
    height: 90px; 
} 
#logo { 
    background: url(../img/logo.png) no-repeat; 
    width: 126px; 
    height: 75px; 
    margin: 7.5px 0; 
    float: left; 
} 
nav ul { 
    float: right; 
} 
nav ul li { 
    display: inline; 
    margin-left: 30px; 
    line-height: 90px; 
} 
nav ul li a { 
    font-size: 1.1em; 
    color:#dddddd; 
    font-weight:600; 
} 
#current { 
    color: white; 
}

來源

2017-03-02 James

歡迎的StackOverflow！請提供您的嘗試的[最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。作爲[Stack Snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/），因此我們可以嘗試解決您的問題並解釋原因你自己的嘗試失敗了 - 這樣你就可以學到一些對你未來發展有用的東西，併爲這個單一問題找到答案。 – andreas

我希望這是你在找什麼。使用position屬性而不是float。由於您使用的是背景圖片，因此float無法在背景上使用。

所以，使用位置元素。有必要使用

位置：相對;

爲幫助保持元素在父項範圍內的元素的父項。

nav { 
 
    width: 80%; 
 
    margin: auto; 
 
    height: 90px; 
 
    position: relative; 
 
} 
 
#logo { 
 
    background: url(../img/logo.png) no-repeat; 
 
    width: 126px; 
 
    height: 75px; 
 
    margin: 7.5px 0; 
 
    border: 1px solid red; 
 
    position: absolute; 
 
    left: 0px; 
 
} 
 
nav ul { 
 
    overflow: auto; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
nav ul li { 
 
    float: left; 
 
    display: inline; 
 
    margin-left: 30px; 
 
    line-height: 90px; 
 
}

來源

2017-03-02 14:29:55

謝謝我現在使用位置絕對定位它。但是，我仍然想知道當試圖向左浮動時徽標出現在div中心的原因。 – James

您不能將float用於背景，因此float屬性不適用。但你之前的風格有margin：auto，這使它成爲中心。 –

再次感謝。雖然我很困惑。我認爲利潤不是由孩子繼承的。請原諒我，因爲我是初學者。 – James

無法將徽標左側浮動導航

回答

相關問題