Question

我有两个小的html / css问题。

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

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

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

第一个问题：当我的浏览器最大化时，我的搜索文本框位于右上角，所有按钮都放在一条水平线上。没关系。但是当我调整浏览器的大小（宽度）时，我的按钮适合两行，我不知道为什么？我希望我的所有按钮都保持一行。
第二个问题：当我的浏览器最大化时，我的内部div和外部div显示正确。但是当我的浏览器在某一点调整大小（宽度）时，外部div的右侧被内部div隐藏，我不知道为什么？

任何帮助都将受到高度赞赏。

Answer 1

第一个问题：

如果容器的大小不足以显示内联元素（如按钮那样），它们将换行到下一行。您可以white-space: nowrap;使用.inner-div来阻止这种情况。

第二

您确实指定了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..Change width：auto to width：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;，check.it将有效..

我建议使用表格...

<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>

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

3 个答案: