响应式菜单 - 宽度自动和向左浮动答案

【问题标题】：Responsive menu - width auto and float left响应式菜单 - 宽度自动和向左浮动
【发布时间】：2016-11-19 20:34:51
【问题描述】：

我有一个带有以下 CSS 的菜单：

.nav {
    position: static; 
    text-align: left; 
    min-width: 300px;
    width: auto;
    max-width: 75%;
    margin-top: 3%; 
    padding-bottom: 5%;  
    float: left;
}

菜单的 HTML：

<ul class="nav nav-pills nav-stacked">
    <li><a href="ucp.php">Menu</a></li>
    <li class="active"><a href="blah.php">Menu</a></li>
    <li><a href="purchase.php">Menu</a></li>
    <li><a href="logout.php">Logout</a></li>
</ul>

Demo

在它旁边（右侧）我有一个表格。我正在尝试使其具有响应性，因此当分辨率较低的用户打开我的网站时，菜单不会在侧面，而是在顶部，以 75% 的宽度居中。正如您在上面看到的，我尝试使用 width: auto 和 min-width + max-width 来做到这一点，但它拒绝使用 float: left;因为某些原因。将图片放在下面以便更好地理解。

My site on smaller resolution

How I want it to be on smaller resolution (changed width: auto to width:75%)

似乎 float:left 在这里给我带来了麻烦，因为当我删除它时， width: auto 可以完美运行（但是我需要它，以便表单与菜单正确对齐）。

提前感谢所有答案！

【问题讨论】：

这可能是真的，但你为什么要让你的准助手出去寻找它呢？添加了演示。

标签： html css css-float width

【解决方案1】：

将您的样式包装在媒体查询中以将它们限制在 XS 尺寸范围内，然后像这样进行调整：

@media (max-width: 767px) {
    .nav {
        position: static;
        text-align: left;
        min-width: 300px;
        width: 75%;
        max-width: 75%;
        margin: 3% auto 0;
    }
}

Demo

【讨论】：

【解决方案2】：

我对您的代码做了一些更改..

<ul class="nav nav-pills nav-stacked">
  <li><a href="ucp.php">Menu</a></li>
  <li class="active"><a href="blah.php">Menu</a></li>
  <li><a href="purchase.php">Menu</a></li>
  <li><a href="logout.php">Logout</a></li>
</ul>
<form>

您需要使用的是媒体查询 http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

.nav {
  position: static;
  text-align: left;
  min-width: 300px;
  width: auto;
  max-width: 75%;
  margin-top: 3%;
  padding-bottom: 5%;
  float: left;
}
@media screen and (max-width: 500px) {
  .nav {
    position: center;
    text-align: left;
    min-width: 300px;
    width: auto;
    max-width: 80%;
    margin-top: 3%;
    padding-bottom: 5%;
    float: none;
    text-align:center;
    margin-left: 40px;
  }
}

演示：https://jsfiddle.net/tz720k1h/5/

【讨论】：