標頭元素在小屏幕上無法對齊

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 個解決方案

解決方案1
0 已采納 2017-07-08 09:19:11

標頭元素在小屏幕上無法對齊

問題描述

1 個解決方案

解決方案1 0 已采納 2017-07-08 09:19:11

解決方案1
0 已采納 2017-07-08 09:19:11