我用 Html 和 CSS 创建了一个简单的布局,如下所示:
CSS
.search-box{border:1px solid gray;padding:
5px;border-right:5px solid gray;padding-right:30px;
width:60%;font-size:14px;}
.search-box:focus{outline:none;}
.search-buton{background-color:gray;
border:1px solid gray;padding:5px;font-size:14px;
cursor:pointer;color:#fff;width:10%;}
.search-buton:hover{background-color:#575E5B;border:1px solid #575E5B;}
.left{float:left; border:1px solid gray; width:68%;padding:10px;}
.right{float:right; border:1px solid gray;width:28%;padding:10px;}
HTML
<div class="right">
<input class="search-box" type="text" placeholder="ASP.NET MVC, JQuery, Ajax, etc." />
<input class="search-buton" type="submit" value="Search" />
</div>
<div class="left">
</div>
<div style="clear:both;"></div>
查看 JSFiddle 示例:
http://jsfiddle.net/tugberk/uuVuW/
如您所见,我无法顺利看到它们。一些屏幕分辨率,它是完美的。但是当我在浏览器内部放大时,事情就变得一团糟了。
我考虑过使用 CSS3 媒体查询来解决这个问题,但我确信有一些 CSS 技巧可以为我解决这个问题。有什么想法吗?
BTW, Any suggestion for the title of this question would be great. It is not so creative I think.
最佳答案
您还需要使用百分比填充,因为这会影响整体宽度
举个例子: http://jsfiddle.net/uuVuW/2/
这解释了盒子模型: http://www.w3.org/TR/CSS2/box.html
关于asp.net - 在每个屏幕分辨率上并排显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7915482/