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

我有两个小的HTML/CSS问题。基本上，我有一个蓝色的框架（2个div：1px边框的外部div和7px边框的1个inner-div），它包含一个标题（左上角），一个搜索文本框（右上角）和一些纽扣。按钮调整大小时不适合1行

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

在这里我们可以看到结果以全屏幕再现问题：http://jsfiddle.net/n2Rmx/embedded/result/

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

任何帮助将受到严格的赞赏。

来源

2011-05-12 Bronzato

见我的答案 - 它应该是你的要求。 – breezy 2011-05-12 14:46:05

如果你想解释你的问题来理解为什么，请参阅我的答案;-) – DanielB 2011-05-12 14:48:18

第一问题：

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

第二

你做指定min-width，所以在div将始终是至少700像素（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

来源

2011-05-12 14:25:35 DanielB

编辑您的css..Change宽度：自动为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>

来源

2011-05-12 14:28:00 Anish

我需要保持width：auto，因为div的宽度必须与页面宽度相同。我忘了提到，当页面大小调整后，当最右边的按钮没有到达页面边框但是文本框搜索边框时，我的按钮又回到了新行。我不知道我是否清楚？让我们尝试调整页面大小并保持最右侧按钮的注意力。你会发现这个按钮会出现一个奇怪的原因返回到新行...... – Bronzato 2011-05-12 14:41:03

更好地使用按钮表。

...

– Anish 2011-05-12 14:50:28

这是我回答你的问题，以及对的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}

来源

2011-05-12 14:37:33 breezy

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

回答

相关问题