asp.net - 在每个屏幕分辨率上并排显示

Question

我用 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.

Answer 1

您还需要使用百分比填充，因为这会影响整体宽度

举个例子: http://jsfiddle.net/uuVuW/2/

这解释了盒子模型: http://www.w3.org/TR/CSS2/box.html