Question

我无法让我的徽标显示在导航栏的左侧。它只是出现在中间，导航菜单向下移动。请你帮我解决一下并理解我做错了什么？

<!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="#">admin@coffeehouseabz.com</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;
}

Answer 1

我希望这是你要找的。使用position属性而不是float。由于您使用的是background-image，因此float不适用于背景。

所以，使用position元素。有必要使用

职位：相对;

表示元素的父元素，它有助于将元素保持在父元素的范围内。

void printSingle(double d)
{
    std::cout << "DBL!!! " << d << " ";
}

template <typename T>
void printSingle(const T& t)
{
    std::cout << t << " ";
}

template <typename...ARGS>
void Print(const ARGS&...args) {
    const int dummy[] = {0, (printSingle(args), 0)...};
    static_cast<void>(dummy); // Avoid warning for unused variable
    std::cout << std::endl;
}

无法使徽标浮动左侧导航

1 个答案: