ウェブサイトの画面サイズが異なると表示が異なります

ウェブデザインは本当に新しいです。私は私の学校の学生のためのウェブサイトを構築しています。しかし、私のMacでは、コンテンツが中央に表示されます。しかし、ウィンドウ上では、コンテンツは左よりも右に余分にあります。
ウェブサイトの画面サイズが異なると表示が異なります

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

出典

2017-09-30 Kevin Tsou

チェックこのコードは、それが役立つことがあります

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

出典

2017-09-30 04:40:50

ウェブサイトの画面サイズが異なると表示が異なります

答えて

関連する問題