使div响应

Question

我正在尝试制作一个包含一组响应工具的div。我在下面有一个侧面菜单，我已做出响应。有人能告诉我哪里会出错。

＆＃13;

＆＃13;

#tools {
  width: 160px;
  position: fixed;
  display: inline-block;
  margin: 0 auto;
  line-height: 1.4em;
}
@media only screen and (max-width: 600px) {
  #tools {
    width: 70%;
  }
}

＆＃13;

<div id="tools" style="width: 100%">
  <table>
    <tr>
      <td>
        <input type="text" id="searchInput" placeholder="Type To Filter" ng-model="search" class="searchMenu">
      </td>
      <td id=uploadedit>
        <button id="upload" onclick="insertIntoDatabase()" class="pinColor"><i class="fa fa-upload fa-2"></i>
        </button>
      </td>
      <td id=impledit>
        <button id="implview" onclick="openImplView()" class="pinColor"><i class="fa fa-pencil fa-2"></i>
        </button>
      </td>
      <td>
        <button id="home" class="homeButton"><i class="fa fa-home fa-2"></i>
        </button>
      </td>
      <td>
        <button id="keep-menu-open" class="pinColor" ng-click="openAndFixMenu"><i class="pinColor"></i>
        </button>
      </td>
      <td>
        <button id="open-left" class="toggleButton" ng-click="toggleMenu()"> <i class="fa fa-bars fa-2"></i>
        </button>
      </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的媒体查询中有拼写错误：它应该是itemnumber而不是#。除此之外，您还要声明##内联会覆盖您在样式表中写下的内容，这就是您无法查看查询结果的原因。

Answer 2

可能最好采取风格=＆＃34; 100％＆＃34;从div开始，这样的任何内联样式都会覆盖样式表中的任何内容。

同样在媒体查询中

##tools { width: 70%; }

更改为

#tools { width: 70%; }