html – Foundation 5类label.inline是否只能用于@media medium-up？

概述我正在尝试为不同的媒体类型获取此布局,示例如下. 小屏幕： +----------------------+| LABEL |+----------------------+| TEXT INPUT |+----------------------+ 中屏幕： +----------------------+---------------- 我正在尝试为不同的媒体类型获取此布局,示例如下.

小屏幕：

+----------------------+| LABEL                |+----------------------+| TEXT input           |+----------------------+

中屏幕：

+----------------------+----------------------+| LABEL                | TEXT input           |+----------------------+----------------------+

所以我有这个代码：

<div >    <div >        <label>            Label        </label>    </div>    <div >        <input type="text" />    </div>                                    </div>

一切都很好,但对于中等屏幕,标签不是垂直对齐到中间,也不是与右侧水平对齐.为了实现这个基础5有两个特殊的标签类：label.inline和label.right但我不喜欢这些类也用于小屏幕.

可能的解决方案,我已经知道但寻找更好的(仅限CSS)：

<label >    Label</label><label >    Label</label>

是否有任何CSS唯一的解决方案,重复使用基础类内联和右,或者我必须有两个标签,一个是仅对小屏幕可见,一个是可见的其余屏幕？

解决方法 既然你说你正在使用SASS,你可以制作一个自定义类,并为中画面和更高版本添加内联标签样式.这是你如何做到这一点：

label {    &.inline-for-medium-up {         @media #{$medium} {            @include form-label(inline,false);        }    }}<div >    <div >        <label >            Label        </label>    </div>    <div >        <input type="text" />    </div>                                    </div>

说明：

使用SASS,您可以创建CSS的混合,然后将它们包含在您想要的任何位置. Form-label是创建基础的mixin,它包含所有表单标签样式.它有两个可以添加的参数,一个是内联的.因此,如果您包含mixin并添加inline参数,则sass将包含内联标签的所有CSS.我将mixin与媒体查询中的参数包括在一起,该参数表示如果屏幕大小适中,则仅包括样式.

总结

以上是内存溢出为你收集整理的html – Foundation 5类label.inline是否只能用于@media medium-up？全部内容，希望文章能够帮你解决html – Foundation 5类label.inline是否只能用于@media medium-up？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。