Question

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

这是一张小屏幕上的图片：

以下是代码：

<!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

标题元素未在小屏幕上对齐

1 个答案: