header 元素在小屏幕上未对齐

Question

我正在练习一些网页设计技巧，这里有一个问题，就是 header 在全屏上不会让它的元素出来，但在商场屏幕上恰恰相反：这是大屏幕上的图片：

这是一张来自小屏幕的图片：

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Responsive html practice site</title>
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>

    <div class="container">

        <div class="header">
                 <div class="lgcontainer">
                        <h1 class="ib">Sonora</h1><img class="ib" src="img/images/logo.jpg" />
                 </div>
            <div>

            </div>

        </div>

    </div>



</body>
</html>

这里是 css:

body
{
    margin:0;
    padding:0;
}

.lgcontainer
{
    margin:0 0 0 3.5%;
    width:20%;
    float:left;
    text-align:center;
    height:inherit;
}

.lgcontainer h1
{
    margin:0 0 10% 0;
}

.lgcontainer img
{
    margin:5% 0 0 5%;
}

.header
{
 width:100%;
 background:linear-gradient(#393a3b, #000000);
 color:white;
 height:65px;

    }

.ib
{
    display:inline-block;
}

我需要让它和全屏时一样

Answer 1

您需要将 .lgcontainer width 设置为 100%，将 text-align 设置为 left。这是 css 代码：

body
{
    margin:0;
    padding:0;
}

.lgcontainer
{
    margin:0 0 0 3.5%;
    width:100%;
    float:left;
    text-align:left;
    height:inherit;
}

.lgcontainer h1
{
    margin:0 0 10% 0;
}

.lgcontainer img
{
    margin:1% 0 0 5%;
}

.header
{
 width:100%;
 background:linear-gradient(#393a3b, #000000);
 color:white;
 height:65px;

    }

.ib
{
    display:inline-block;
}

Codepen 示例：https://codepen.io/anon/pen/KqGKLx

header 元素在小屏幕上未对齐

header elements not aligning on small screens

html

css

responsive