时间戳

首页 > 解决方案 > HTML/CSS 响应式设计

html - HTML/CSS 响应式设计

问题描述

我创建了一个带有一些按钮的页面。所有的设计都是正确的，所有的定位也是正确的。

所有的问题是它没有响应。

我使用了一些属性，如顶部、左侧，我认为它在响应式设计中伤害了我，但我可能错了。

我希望在缩小窗口时，按钮会自动移动（响应式设计）

任何人都可以帮助我让一切响应并到位吗？

代码笔

#inline-container img { 
    position: absolute; 
    display: block; 
    margin: 0px; 
    border: none; 
    padding: 0px; 
}

#inline-container div { 
    position: absolute; 
}

#inline-container { 
    display: block; 
    position: relative; 
    width: 1920px; 
    height: 1080px; 
    overflow: hidden;  }

#_bg__home___quadrado___6_colunas {
    top: 0px;
    left: 0px;
    width: 1920px;
    height: 1080px;
    background:rgba(255,255,255,255);
}

.search_box {
    top:16px;
    left: 1384px;
    width: 216px;
    height: 32px;
    background-color: #edf3f9;
    opacity: 0.8; 
    border: none;
    border-radius: 16px;
    line-height: 20px;
    color: black;
    text-indent: 40px;
    position: relative;
 }

.Upload {
    top: 16px;
    left: 76px;
    width: 135px;
    height: 32px;
}

.It {
    top: 24px;
    left: 728px;
    width: 88px;
    height: 24px;
}

.Ta {
    top: 24px;
    left: 944px;
    width: 92px;
    height: 24px;
}

.No {
    top: 24px;
    left: 1052px;
    width: 141px;
    height: 24px;
}

.Ca {
    top: 24px;
    left: 832px;
    width: 96px;
    height: 24px;
}

.btn-c{
    opacity: 1;
      top: 24px; 
    left: 832px;
      width: 96px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-c:active{
              width: 96px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-n{
    opacity: 1;
        top: 24px;
       left: 1052px;
      width: 141px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-n:active{
              width: 141px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-i{
    opacity: 1;
        top: 24px;
       left: 728px;
      width: 88px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-i:active{
              width: 88px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

  .btn-t{
    opacity: 1;
        top: 24px;
       left: 944px;
      width: 92px;
      height: 24px;
    text-align: center;
  font: Bold 13px/20px Noto Sans;
  letter-spacing: 0;
     color: #4D4F5C;
       -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgb(250, 250, 251);
    outline:none;
    cursor: pointer;

      }
          .btn-t:active{
              width: 92px;
          height: 24px;
      -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
    background: rgba(202,206,213,255);
          opacity: 1;
  }

.btn-upload{
    top: 16px;
      left: 76px;
      width: 135px;
      height: 32px;
        cursor: pointer;
        -ms-border-radius: 16px;
      -o-border-radius: 16px;
      -moz-border-radius: 16px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
    border-width: 0px;
   background-color: rgb(232, 238, 245);
    outline:none;
      font-family: Noto Sans;
      font-size: 13px;
      text-align: center;
      color:#4d4f5c; 
      }


<div style="width: 100%;height: 100%;">
  <div style="width: 100%; height: calc(100% - 64px);">
      <div id="inline-container" >
          <div id="_bg__home___quadrado___6_colunas"  ></div>
          <div>
            <input type="text" class="search_box" placeholder="Search..."/> 
           </div>    
          <div class="Upload"  >             
                  <button class="btn-upload"> Upload Files</button>              
          </div>
          <div class="It">
            <button  class="btn-i">Settings</button>
          </div>

          <div class="Ta">
            <button  class="btn-t">Settings</button>
          </div>

          <div class="No">
            <button  class="btn-n">Settings</button>
          </div>

          <div class="Ca">
             <button  class="btn-c">Settings</button>
          </div>
      </div>
  </div>
</div>

标签： htmlcss

解决方案

以下是我为此编写标记和样式的方法。你可以使用弹性盒子。

https://jsfiddle.net/sheriffderek/yao1wdgp/（现场示例）

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.page-section {
  border: 1px solid orange;
}

.page-section .inner-column {
  width: 98%;
  max-width: 900px; /* arbitraty */
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  border: 1px solid blue;
}

.masthead {
  border: 1px solid lime;
}

.masthead .settings-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* */
  margin-top: 10px;
}

@media (min-width: 400px) {
  .masthead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .masthead .settings-list {
    display: flex;
    flex-direction: row;
    margin-top: 0;
  }
}
<header class="page-section site-header">
<div class="inner-column">
  
  <nav class="masthead">
    
    <button class="upload">upload</button>
    
    <ul class="settings-list">
      <li class="setting">
        <button>Settings A</button>
      </li>

      <li class="setting">
        <button>Settings B</button>
      </li>
      
      <li class="setting">
        <button>Settings C</button>
      </li>
      
      <li class="setting">
        <button>Settings D</button>
      </li>
    </ul>
  </nav>

</div>
</header>

推荐阅读