不同屏幕尺寸的网站显示不同答案

【问题标题】：Website display differently with different screen size不同屏幕尺寸的网站显示不同
【发布时间】：2018-03-11 23:14:33
【问题描述】：

我对网页设计真的很陌生。我正在为我学校的学生建立一个网站。但是，在我的 Mac 上，内容显示在中心。但在 Windows 上，内容在右侧比左侧有更多空间。

  .inner
{
 text-align: center;
 display: inline-block;
 position: absolute;
 top: 30%;
 left: 25%;
 margin: 0 auto;
}

   <div class="inner">
     <h1>What are you looking for?</h1>
     <br>
     <button class="button button4"><font size="6">Developer</font></button>
     <button class="button button4"><font size="6">Entrepreneur<font size="6"></button>
     <button class="button button4"><font size="6">Other<font size="6"></button>
   </div>

【问题讨论】：

标签： html css windows macos

【解决方案1】：

检查此代码可能对您有所帮助

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .inner-div
        {
            text-align: center;
            margin: 0 auto;
            background-color: #fafafa;
            border: 1px solid #ccc;
            width: 40%;
            min-height: 200px;
        }
        .button
        {
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            padding: 10px 20px;
            text-align: center;
            font-size: 14px;
        }
        .button:hover
        {
            background-color: #f9f9f9;
            border: 1px solid #aaa;
            padding: 10px 20px;
            text-align: center;
            font-size: 14px;
            cursor:pointer;
        }
        @media screen and (max-width: 1024px)
        {
            .inner-div
            {
                width: 60%;
            }
        
        
        }
        @media screen and (max-width: 678px)
        {
            .inner-div
            {
                width: 90%;
            }
            .button
            {
                width: 100%;
            }
        
        }
    </style>
</head>
<body>
    <div class="inner-div">
        <h1>
            What are you looking for?</h1>
        <br>
        <button class="button">
            Developer
        </button>
        <button class="button">
            Entrepreneur
        </button>
        <button class="button">
            Other
        </button>
    </div>
</body>
</html>

【讨论】：