Question

在HTML5＆amp; CSS3，徽标需要浮动到左上角和项目/菜单列表需要浮动到右上角。

在此处的输出中，徽标由于某种原因不可见。但是＆＃34; alt＆＃34;被提及，＆＃34;代替徽标。＆＃34;

这是从我这边收到的输出。我在网页顶部用白色标记了它： Here is the output is received from my side. I've marked it with white color on top of the webpage

＆＃13;

/*---------------------------------------------------------*/
/*Basic Setup*/
/*---------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #fff;
    color: #555555;
    font-family: 'Lato', 'Arial', sans-serif;
    color: #555555;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}
/*---------------------------------------------------------*/
/*----------------REUSABLE COMPONENTS----------------------*/
/*---------------------------------------------------------*/
.row {
    max-width: 110px;
    margin: 0 auto;
}
/*-------------------------HEADINGS------------------------*/
h1 {
    margin: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
}
/*-----------------BUTTONS---------------*/
.btn:link,
.btn:visited {
    display: inline-block;
    color: #fff;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s, border 0.2s, color 0.2s;
}

 .btn-full:link,
 .btn-full:visited {
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #fff;
    margin-right: 15px;
    
}

.btn-ghost:link,
.btn-ghost:visited {
    color: #e67e22;
    border: 1px solid #e67e22;
}

.btn:hover,
.btn:active {
    background-color: #cf6d17;
}

.btn-full:hover,
.btn-full:active {
    border: 1px solid #cf6d17;
    
}

.btn-ghost:hover,
.btn-ghost:active {
    color: #fff;
    border: 1px solid #cf6d17;
}
/*------------------------------------------------------------------------*/
/*----------------------------HEADER--------------------------------------*/
/*------------------------------------------------------------------------*/
header {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(Images/hero.jpg);
    
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-40%,-50%);
}


.logo {
    height: 100px;
    width: auto;
    float: left;
    margin-top: 20px;
}

.main-nav {
    float: right;
    list-style: none;
    margin: 55px;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
}

.main-nav li a:link, 
.main-nav li a:visited {
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover, 
.main-nav li a:active {
    border-bottom: 2px solid #e67e22;
}

＆＃13;

我的HTML文件：

<!DOCTYPE html>

<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="Vendors/CSS/normalize.css">
        <link rel="stylesheet" type="text/css" href="Vendors/CSS/grid.css">
        <link rel="stylesheet" type="text/css" href="Resources/CSS/Style.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i" type="text/css" rel="stylesheet">
        <title>Shyam Restaurant</title>
    </head>

    <body>
        <header>
            <nav>
                <div class="row">
                    <img src="Resources/Images/logo-white.png" alt="Shyam Restaurant Logo" class="logo">                      
                     <ul class="main-nav">
                        <li><a href="#">Food Delivery</a></li>
                        <li><a href="#">How It Works</a></li>
                        <li><a href="#">Our Cities</a></li>
                        <li><a href="#">Sign Up</a></li>
                     </ul>
                </div>
            </nav>
            <div class="hero-text-box">
                <h1>Goodbye junk food. <br>Hello super healthy meals</h1>
                <a class="btn btn-full" href="#">I'm hungry</a>
                <a class="btn btn-ghost" href="#">show me more</a>
            </div>
        </header>

        <section class="section-features">
            <div class="row">
                <h2>Get food fast &mdash; not fast food</h2>
                <p class="long-copy">
                    Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
                </p>
            </div>

            <div class="row">
                <div class="col span-1-of-4">
                    <h3>Up to 365 days/year</h3>
                    <p>
                        Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
                    </p>
                </div>

                <div class="col span-1-of-4">
                    <h3>Ready in 20 minutes</h3>
                    <p>
                        You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
                    </p>
                </div>

                <div class="col span-1-of-4">
                    <h3>100% organic</h3>
                    <p>
                        All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
                    </p>
                </div>

                <div class="col span-1-of-4">
                    <h3>Order anything</h3>
                    <p>
                        We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
                    </p>
                </div>
            </div>
        </section>
    </body>
</html>

我无法找到徽标可见的原因。

Answer 1

您的元素正确浮动，但是，父级的最大宽度为110px，由类row提供，因此，基本上，它们没有太多空间来定位

标志（浮动：左）＆amp; list（float：right）不可见

1 个答案: