调整大小时按钮不适合 1 行

Question

我有两个小 html/css 问题。

基本上，我有一个蓝色框架（2 个 div：1 个外部 div 用于 1px 边框，1 个内部 div 用于 7px 边框），其中包含一个标题（左上角）一个搜索文本框（右上角）和一些按钮.

我这里有一个 jsFiddle：http://jsfiddle.net/n2Rmx/

我们可以在此处全屏查看结果以重现问题：http://jsfiddle.net/n2Rmx/embedded/result/

1. 第一个问题：当我的浏览器最大化时，我的搜索文本框位于右上角，并且我的所有按钮都位于一条水平线上。没关系。但是当我调整浏览器的大小（宽度）时，我的按钮适合两行，我不知道为什么？我希望我的所有按钮都保持在一行中。

2. 第二个问题：当我的浏览器最大化时，我的inner-div 和outer-div 显示正确。但是当我的浏览器在某个点调整大小（宽度）时，outer-div的右侧被inner-div隐藏了，我不知道为什么？？

任何帮助将不胜感激。

Answer 1

第一个问题：

如果容器不够大，无法显示内联元素（就像按钮一样），它们将换行到下一行。你可以在.inner-div 上使用white-space: nowrap; 来防止这种情况发生。

第二次

您确实指定了min-width，因此 div 将始终至少为 700px (740px) 宽。如果浏览器窗口没有那么宽，您将有水平滚动条。内部 div 的重叠来自您的边框和填充定义以及最小宽度的定义。这里有一些数学

min-width: 700px
border:      7px x 2 (left and right)
padding:    15px x 2 (left and right)
-------------------------------------
           744px > 740px min-width of the outer div

Answer 2

这是我对你的问题以及 jSFiddle 的回答 - http://jsfiddle.net/n2Rmx/8/

您几乎需要包含宽度的按钮的 div。 （我还将您的 搜索栏 包装到了一个 div 中。）

  <div id="search">
      <input type="text" name="SearchCriteria.Anything" />
    </div>


#search { float: right;
   position: relative;
   right: 10px;
   top: -32px;
   outline: none}

input[type="button"] {display:inline;width:100px}
#buttonbar {
    border:4px solid #333;
    clear:both;
    margin:30px 0;
    overflow:hidden;
    width:960px}

Answer 3

编辑你的css..将宽度：自动更改为宽度：900px（或其他）；

.inner-div
{
    width: auto;
    padding: 5px 15px 0px 15px;
    border: 7px solid #f3f7fd;
    background-color: #fcfdfe;
    min-width:700px;
    display:block;
}

.outer-div
{
    width: auto;
    border: 1px solid #bbd8fb;
    border-collapse: collapse;
    min-width:740px;
    display:block;
}

而且这一行还有一个 pblm...

<div style="font-size: 1.5em; color: #000; margin-bottom: 10px;">             Recherche d'affaires               </div>

删除margin-bottom: 10px; 并检查。它会工作..

我有一个使用表格的建议...

<table id="buttonbar">
     <tr><td><input type="button" value="this is the first" /></td>
     <td> <input type="button" value="this is the second" /></td>
     <td> <input type="button" value="this is the third" /></td>
     <td> <input type="button" value="this is the fourth" /></td>
     <td> <input type="button" value="this is the fifth" /></td>
     <td> <input type="button" value="this is the sixth" /></td>
     <td> <input type="button" value="this is the seventh" /></td>
     <td> <input type="button" value="this is the eigth" /></td>
    </table>