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%)

好像浮动：左边让我在这里遇到问题，因为当我删除它时，宽度：自动工作完美（但是我需要它，所以表格与菜单正确对齐）。

提前感谢所有答案！

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/

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

2 个答案: