Question

CSS

body{
    background-color:white;
    color:black;
    font-size:100%;
    font-family: Arial;
    line-height: 1.5%;
    text-align: left;
}

.body{
    margin: 0 0;
    width: 100%;
    clear:both;
}

.social-media{
    position:fixed;
    width:100%;
    height: 40px;

    background: -webkit-linear-gradient(top, #FF9C00, #FFB540);
    background: -o-linear-gradient(top, #FF9C00, #FFB540);
    background: -moz-linear-gradient(top, #FF9C00, #FFB540);
    background: linear-gradient(top, #FF9C00, #FFB540);
}
.social-media nav ul{
    list-style: none;
    margin: 0 auto;
    float: left;
}

.social-media nav ul li{
    display: inline;
}
.social-media left{
    float:left;
}
.social-media right{
    float:right
}

HTML

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Project</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body class="body">
        <header class="social-media">
            <nav>
                <div class="left">
                    <ul>
                        <li><input type="button" value="Login"></li>
                        <li><input type="button" value="Register"></li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li><img class="social-image" src="img/facebook.png"></li>
                        <li><img class="social-image" src="img/twitter.png"></li>
                        <li><img class="social-image" src="img/youtube.png"></li>
                    </ul>
                </div>
            </nav>
        </header>
    </body>
</html>

它显示如下http://i.gyazo.com/b4355b1e3b84209023f594fa71fb83be.png

但是我想要右边的Facebook，Twitter和YouTube图像。但是我似乎无法让它发挥作用。只是想知道是否有人可以给我一些建议。

Answer 1

您的css班级名称中缺少句点（left和right）。

.social-media .left{
    float:left;
}
.social-media .right{
    float:right
}

对＆amp;左菜单CSS？

1 个答案: