Question

我正在尝试调整css，以便网站顶部的栏适合一行。现在，当屏幕较小时，该字段显示在2行上。（在移动设备上以及调整浏览器窗口时）。菜单也一样。

如果有人能帮助我，我会非常感激。

Answer 1

尝试：

#nsu-head p.form_label{
text-transform: uppercase;
 padding-right: 60px;
 margin-top: -9px;
 margin-left: 0;/* this will affect */
}

的 in related media query 的

您可以像这样编写22in的媒体查询：

@media screen and (min-width:21in) and (max-width:23in){/* or other size */ text-transform: uppercase; padding-right: 60px; margin-top: -9px; margin-left: 0;/*your value*/ }

Answer 2

这是一个解决方案，但我认为不可能将所有内容保存在＆＃34; 1行＆＃34;中。您必须使用媒体查询来定位不同的部分。在您发布的代码中，您看起来有很多样式重叠。尝试简化边距和填充等内容，而不是在很多元素上使用边距，尝试先识别这些元素并将填充应用于其父元素。这样你只需要做一次。

http://jsfiddle.net/oneeezy/B2rS6/11/

<强> CSS：

    /* Makes padding not add extra width to parent element */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    /* Rows (clear fix - This is like pressing the "return" key down to the next line) */
    .row:before, .row:after { content: " "; display: table; }
    .row:after { clear: both; }
    .row { *zoom: 1; clear: both;  }

    /* Large Screens */
    .nsu-header-wrapper { background: #39b54a; width: 100%; }
    .nsu-header { color: white; margin: 0 auto; padding: 1em 0; width: 90%; } /* or whatever you want your width to be */
    .form_label { width: 40%; float: left; display: block; }
    .nsu-form { float: right; text-align: left; display: inline-block; }
    .nsu-form p { float: left; padding: 0 0 0 1em; }

    /* Media Query (For tablet) */
    @media screen and (min-width: 769px) and (max-width: 1024px) { /* Adjust this width to meet your needs */
        .nsu-header { text-align: center; }
        .form_label { width: 100%; float: left; display: block; }
        .nsu-form { float: none; display: inline-block; }
    }

    /* Media Query (For mobile) */
    @media screen and (min-width: 0) and (max-width: 768px) { /* Adjust this width to meet your needs */
        .nsu-header { text-align: center; }
        .form_label { width: 100%; float: left; display: block; }
        .nsu-form { width: 100%; float: left; display: block; }
        .nsu-form * { width: 100%; float: left; display: block; }
    }

正如您可以想象的那样，媒体查询会让事情变得非常棘手......我花了很多时间在网格系统上试图挑选出最好的＆＃34; ..而且我无法和真的找到了对我来说最有意义的东西。

所以我创建了自己的：http://oneillwebs.com/grid/

随意在您的项目中使用它或作为学习工具！它是基于百分比的媒体查询创建的，因此您所依赖的任何屏幕都适合。希望这有帮助

在1行上安装订阅栏以获得更小的屏幕尺寸

2 个答案: