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

Question

我有一个包含以下内容的菜单 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 工作得很好（但是我需要它，所以表单与菜单正确对齐）。

提前感谢您的所有回答！

Answer 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

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

你需要用到的是Media Query 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/

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

Responsive menu - width auto and float left

html

css

width

css-float