Question

这是我正在使用的CSS和HTML。我已经尝试过@media only屏幕。它没有用，所以我摆脱了那部分代码。

我将在下面复制并粘贴我的html和CSS。您到目前为止在下面看到的代码几乎是我到目前为止所拥有的。

同样，我需要一种使网页适合所有屏幕而不偏离其原始位置和布局的方法。

HTML-

      <!DOCTYPE HTML>                                         
      <html>                                      
         <head>
         <meta charset="UTF-8">
         <title>ListeningHere</title>
         <link href="css.css" rel="StyleSheet" type="text/css">
         <meta name="viewport" content="width=device-width, initial- 
          scale=1.0">     
         </head>
  <body>
  <h1><img src="listening_here.png" alt="ListeningHere"></h1>
      <div class="invisible">
        <div class="first">
            <h2>What is the season?</h2>
        <div class="box">
            <select name="season">
            <option value=""></option>
            <option value="Winter">Winter</option>
            <option value="Summer">Summer</option>
            <option value="Spring">Spring</option>
            <option value="Fall">Fall</option>
            </select>     
        </div>
        </div>

        <div class="first">
            <h2>What is the time of day?</h2>
        <div class="box">
            <select name="season">
            <option value=""></option>
            <option value="Morning">Morning</option>
            <option value="Afternoon">Afternoon</option>
            <option value="Evening">Evening</option>
            <option value="Night">Night</option>
            </select>      
        </div>
        </div>

        <div class="first">
            <h2>What is the weather like?</h2>
        <div class="box"> 
            <select name="season">
            <option value=""></option>
            <option value="Sunny">Sunny</option>
            <option value="Rainy">Rainy</option>
            <option value="Cloudy">Cloudy</option>
            <option value="Snowy">Snowy</option>
            </select>  
        </div>
        </div>

        <div class="fourth">
            <button>Submit</button>
        </div>
</div>
</body>
</html>

CSS-

    body {
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: 0;
     height: 100%;
     width: 100%;
     font-family: Lato, sans-serif;
     font color: black;
     font-weight: 400;
     background-color: #C1E5E5;
       }

    h1 {
        padding-left: 50px; 
       }

    h3 {
        text-align: center;
        font-size: 500%;
        font-style: normal;
        font-weight: 400;
        }

   .invisible {
        margin:auto;
        border-radius: 15px;
        background-color: whitesmoke;
        padding: 30px; 
        width: 60%;
        height: 500px; 
       }

   .first {
       height: 150px;
       width: 90%;
       float: left;
       text-align: center; 
       background-color: whitesmoke;
       }

   .second {
       height: 150px;
       width:90%;
       float: left;
       text-align: center; 
       background-color: whitesmoke;
       }

   .third {
       height: 150px;
       width:90%;
       float: left;
       text-align: center; 
       background-color: whitesmoke;
      }

   .fourth {
       height: 50px;
       width: 90%;
       float: left;
       text-align: center; 
       background-color: whitesmoke;
      }

   .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40%;
      border-radius: 8px;
     }
   .box {
      position: absolute;
      padding-left: 265px;
      padding-right: 50px;
      text-align: center;
     }

   .box select {
       background: blue;
       color: white;
       padding: 10px;
       width: 250px;
       height: 50px;
       border: none;
       font-size: 20px;
       box-shadow: 0 5px 25px rgba(0,0,0,.5);
       -webkit appearance: button;
       outline: none;   
     }

Answer 1

将.box更改为

   .box {
      margin-right: 5%;
      text-align: center;
     }

这对我有用。但是，我并没有使用您拥有的任何图像，以免造成干扰。尝试建立响应式网站时，使用绝对排名通常不是一个好主意。

我无法使我的网站具有响应能力。我需要它来适合所有屏幕

1 个答案: