登陆页面的问题

时间:2016-04-08 22:20:04

标签: html css

我附上了我想要它的图像,但是标识的图像彼此并排有问题。

enter image description here



html {
    background: #8CEEF9;
    background: -webkit-linear-gradient(#8CEEF9, #FFFFFF);
    background: -o-linear-gradient(#8CEEF9, #FFFFFF);
    background: -moz-linear-gradient(#8CEEF9, #FFFFFF);
    background: linear-gradient(#8CEEF9, #FFFFFF);
}

.logos {
    display: inline-block;
    max-width:45%; 
    margin:2%; 
    float:left;
    text-align: center;
}

<html>
    <head>
        <link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="main.css" type="text/css" rel="stylesheet">
    </head>
        <body>
            <div class="logos">
                <img class="img-responsive 50" src="logos/main-logo.png">
                <img class="img-responsive 50" src="logos/logos.png">
            </div>
            <div class="seperator"></div>
            <div class="logos">
            </div>
            <div class="cs">
                <h1>Coming Soon</h1>
            </div>
        </body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您需要在徽标类display:inline-block;中提供图像,并且不要浮动徽标类。

.logos img{
    display: inline-block;
}

html {
    background: #8CEEF9;
    background: -webkit-linear-gradient(#8CEEF9, #FFFFFF);
    background: -o-linear-gradient(#8CEEF9, #FFFFFF);
    background: -moz-linear-gradient(#8CEEF9, #FFFFFF);
    background: linear-gradient(#8CEEF9, #FFFFFF);
}

.logos {
    max-width:45%; 
    margin:2%;
    text-align: center;
}

.logos img{
    display:inline-block;  
}
<html>
    <head>
        <link rel="stylesheet"       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link href="main.css" type="text/css" rel="stylesheet">
    </head>
        <body>
            <div class="logos">
                <img class="img-responsive 50" src="logos/main-logo.png">
                <img class="img-responsive 50" src="logos/logos.png">
            </div>
            <div class="seperator"></div>
            <div class="logos">
            </div>
            <div class="cs">
                <h1>Coming Soon</h1>
            </div>
        </body>
</html>