HTML CSS调整大小问题-按钮和复选框向下一行_Html_Css

HTML CSS调整大小问题-按钮和复选框向下一行

html css

HTML CSS调整大小问题-按钮和复选框向下一行,html,css,Html,Css,我的html按钮和复选框有问题。每当我调整页面的大小，尤其是使其非常小，我的按钮和复选框就会出现在底部。您可以通过运行我的代码来检查它。我希望按钮和复选框与文本框保持在同一行。请帮忙。提前谢谢 compresstest.html 表#tblTest{ 宽度：100%；边缘顶部：10px；字体系列：verdana、arial、无衬线字体；字体大小：12px；颜色：#333333；边框宽度：1px；边框颜色：#666666；边界塌陷：塌陷； } 表#tblTest th{ 空白：no

我的html按钮和复选框有问题。每当我调整页面的大小，尤其是使其非常小，我的按钮和复选框就会出现在底部。您可以通过运行我的代码来检查它。我希望按钮和复选框与文本框保持在同一行。请帮忙。提前谢谢

compresstest.html


表#tblTest{
宽度：100%；
边缘顶部：10px；
字体系列：verdana、arial、无衬线字体；
字体大小：12px；
颜色：#333333；
边框宽度：1px；
边框颜色：#666666；
边界塌陷：塌陷；
}
表#tblTest th{
空白：nowrap；
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#666666；
背景色：#dedede；
}
表#tblTest td{
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#666666；
背景色：#ffffff；
}
活跃的
名称
地址
汤姆
英国
汉斯
德国
亨里克
丹麦
莱昂内尔
意大利
里卡多
巴西
克里斯蒂亚诺
葡萄牙

我刚刚在div中添加了最小宽度样式。请看


活跃的


活跃的

您也可以使用空白：nowrap；在你的沙发上

您的

宽度：100%

使元素获得与父对象相关的宽度。将其值更改为非相对：px，em…

您的

宽度：100%

使您的元素获得与父对象相关的宽度。将其值更改为非相对值：px，em…。

为div指定一个宽度，该宽度可以包含您想要的所有内容，但不能包含100%（如您现在所拥有的）

以下是更改了搜索框div宽度的示例：

给你的div一个宽度，这个宽度可以包含你想要的所有内容，但不能是100%（就像你现在拥有的那样）

以下是更改了搜索框div宽度的示例：

Magnus的解决方案比增加宽度向上投票his更灵活。Magnus的解决方案比增加宽度向上投票his更灵活。

<html>
<head>
<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }
</style>
</head>

<body>
 <div style="width: 100%;">
  <input type="text" id="searchCompanyText" name="searchCompanyText" />
  <input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
  <input type="checkbox" id="isActive" name="isActive" checked="checked"   />  Active
 </div>

 <table id="tblTest" style="width: 100%">
  <tr>
   <th>Name</th>
   <th>Address</th>
  </tr>
  <tr>
   <td>Tom</td>    
   <td>UK </td>
  </tr>

  <tr>
   <td>Hans</td>   
   <td>Germany</td>
  </tr>
  <tr> 
   <td>Henrik</td> 
   <td>Denmark</td>
  </tr>
  <tr>
   <td>Lionel</td> 
   <td>Italy</td>
  </tr>
  <tr>
   <td>Ricardo</td>    
   <td>Brazil</td>
  </tr>
  <tr>
   <td>Cristiano</td>  
   <td>Portugal</td>
  </tr>
 </table>
</body>
</html>

<div style="width: 300px;" >
  <input type="text" id="searchCompanyText" name="searchCompanyText" />
  <input type="button" id="searchCompanyBtn" name="searchCompanyBtn" value="Search" onclick="searchCompany ();"/>
  <input type="checkbox" id="isActive" name="isActive" checked="checked"   />  Active
</div>