Question

我正在尝试使我的文本框和按钮看起来响应并且即使我使用移动电话也保持内联阻止。我希望基于浏览器扩展文本框的宽度以使用更多的屏幕。我的HTML看起来像这样：

<div id="wrapper">
         <li class="input-button"> 
           <div style="float:left;">                      
          <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60"/>  
           <div id="loader" style="display:none;"><img src="loader.gif" /></div>            
                                </div>   
              <div style="float:left;margin-left:10px;">              
           <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
                                </div> 
              </li>        
           </div>

和css部分看起来像这样：

body{   
    background: #f5fffa;
    font-family: 'Lora', serif;
    font-family: 'Montserrat', sans-serif;
}
#wrapper {
 max-width: 940px;
  margin:0 auto;
  padding:0;
}
.input-button
{
margin:20px auto;
display:inline-block;
}
#KUNDE{ 
   padding: 10px 5px;
   font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
   border: 1px solid #a4c3ca;
   background: #f1f1f1;
   border-radius: 5px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);  
}
.btn-style {
padding:5px;
border: 1px solid #00748f;
height: 42px;
width: 100px;
cursor: pointer;
font: bold 12px Arial, Helvetica;
border-radius: 5px;      
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
background-color: lightblue;

}

我尝试实现CSS3 flexbox和CSS calc（），例如添加#Kunde { display: flex; }和.input-button input { width: calc(100% - 160px); } 并删除尺寸=＆＃34; 60＆＃34;来自html并使用CSS中的width属性，如#KUNDE{ width=100%; }。这些方法没有帮助我解决问题，或者我无法以正确的方式使用它们：（

任何建议都将受到高度赞赏。

Answer 1

尝试以下方法。在必要的地方使用cal()和width: 100%来实现此目标

＆＃13;

body {
  background: #f5fffa;
  font-family: 'Lora', serif;
  font-family: 'Montserrat', sans-serif;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
}
.input-button {
  display: inline-block;
  width: 100%;
}
.input-wrapper {
  width: calc(100% - 140px)
}
#KUNDE {
  padding: 10px 5px;
  font: bold 16px'lucida sans', 'trebuchet MS', 'Tahoma';
  border: 1px solid #a4c3ca;
  background: #f1f1f1;
  border-radius: 5px;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
.btn-style {
  margin: 0 10px;
  padding: 5px;
  border: 1px solid #00748f;
  height: 42px;
  width: 100px;
  cursor: pointer;
  font: bold 12px Arial, Helvetica;
  border-radius: 5px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
  background-color: lightblue;
}

＆＃13;

<div id="wrapper">
  <li class="input-button">
    <div class="input-wrapper" style="float:left;">
      <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" />
      <div id="loader" style="display:none;">
        <img src="loader.gif" />
      </div>
    </div>
    <div style="float:left;margin-left:10px;">
      <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button>
    </div>
  </li>
</div>

＆＃13;

Answer 2

你的html非常混乱所以我删除了所有不必要的标签：

$this->input->post('your_post_element');

基本思想是以百分比表示元素的宽度，如果要对其进行微调，可以添加不同大小的媒体查询：

<div id="wrapper">
  <form name="searchbar">                     
      <input type="text" id="KUNDE" placeholder="Search by name or ID." value=""/>  

      <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
      <div id="loader" style="display:none;"><img src="loader.gif" /></div>   
  </form>        
</div>

css可能会更清洁，但我不想弄乱你的风格：）

这里有效： http://codepen.io/1GR3/pen/mAqyZr?editors=1100

Answer 3

您的问题有很多解决方案。我已经概述了三个选项，下面是一些示例代码。需要进行一些调整以满足您的特定需求，但这应该是微不足道的。

＆＃13;

* {
  box-sizing: border-box;
}
[id] {
  margin: 10px 0;
}
input {
  width: 100%;
  margin-right: 10px;
}

#example-1 input {
  /* minus button width + input margin */
  width: calc( 100% - 85px ); 
}
#example-1 button {
  width: 75px;
}

#example-2 {
  margin-left: -10px;
  margin-right: -10px;
  overflow: hidden; /* clearfix */
}
#example-2 div {
  float: left;
  padding: 0 10px;
}
#example-2 div:nth-child(1) {
  width: 60%;
}
#example-2 div:nth-child(2) {
  width: 40%;
}
#example-2 button {
  width: 100%;
}

#example-3 {
  display: flex;
  justify-content: space-around;
}

＆＃13;

<h2>Floated with Calc() - <small>Fixed Size Button</small></h2>
<div id="example-1">
  <input type="text"><button type="text">Fixed Width</button>
</div>

<h2>Constrain Width with Container Elements - <small>Percentage Size Button</small></h2>
<div id="example-2">
  <div>
    <input type="text">
  </div>
  <div>
    <button type="text">Percentage Width</button>
  </div>
</div>

<h2>Flexbox</h2>
<div id="example-3">
  <input type="text"><button type="text">Hent</button>
</div>

＆＃13;

第一个示例显示了 calc() 的使用。我猜你以前很近但可能已将它应用于错误的元素和/或应用了错误的值。

第二个示例显示了网格方法，您可以将元素放置在构成网格的其他元素中。然后将这些元素设置为占据其包含元素的某一部分。这与Bootstrap和其他CSS框架类似。

对于第二个例子，我还添加了一个演示，使按钮具有灵活的宽度。虽然该解决方案不需要，但如果使用固定大小，那么如果两个项目都需要占用父元素的整个宽度，则需要切换到示例一或三。

第三个示例显示 flexbox 。

调整文本框的宽度并使移动设备响应

3 个答案: