响应式设计模板
响应式设计模板
提问于 2012-03-09 21:51:07
我是新的响应式设计，我想使响应式菜单，图像，块和网站模板中的每一件事。
我准备好所有的宽度应该是百分比，我做这个例子
http://jsfiddle.net/hQBR6/
如何才能使表单的输入响应不同的屏幕大小，而不低于ul?？
回答 2
Stack Overflow用户
发布于 2012-03-09 23:15:31
问题是，您混合了以PX设置的边距和以%设置的宽度。当屏幕尺寸调整到特定尺寸以下时，将没有足够的空间来容纳边距过大且输入低于此尺寸的元素。
如果你正在做响应式设计，你应该用%-来设置你的页边距。
以下是我如何修改您的代码以使其正常工作：
ul#menu{
border:1px solid black;
display: inline-block;
float:left;
max-width:50%;
margin-left:5%; /* changed to percentage */
margin-top:36px; /* should be percentage as well*/
list-style-type:none;
}
ul#menu li{
display: inline-block;
float:left;
margin-right:36px; /* should be percentage as well*/
width: auto;
}
#header form {
display: inline-block;
margin-right:1%; /* changed to percentage */
float:right;
width:10%;
}
#header form input{
margin-top:28px;
background-color: #e0e0e0;
border-radius:4px;
border:none;
height: 26px;
color:#a6a6a6;
}注意:我只使用左/右边距，实际尺寸由您决定。
希望这能有所帮助
Stack Overflow用户
发布于 2012-06-19 18:29:20
为了你的快速入门，请通过下面的链接，你会找到很好的例子来开始响应式设计。
http://twitter.github.com/bootstrap/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9635102
复制相关文章
相似问题
腾讯云开发者
