javascript - 删除响应页面的大小属性的替代方法

Question

我想要大小为“X”px 的 textfield。现在为了使页面响应，我删除了 size 属性。但是这个改变减少了textfield的实际大小。有没有办法增加输入框的大小(不使用 size 属性)并使其响应？我使用了 bootstrap col-xs-2 等，但这对我的自定义布局没有帮助。另请注意，这不是我第一次遇到此类问题。它发生在 div 和按钮的特殊排列发生在一行中并使其在所有视口(viewport)中看起来一致的要求。如果有人遇到类似问题并已解决，请分享您的想法。

编辑我想让差距在所有决议中保持一致。

    [div]gap[textfield]gap[div]

size属性值为23

<div class="form-group">
   <div class="linstyle1">
      <label>text1</label>
   </div>

   <div id="some-textfield" class="left leftmargin">
     <!--struts tag populates a input field-->  
        <s:textfield name="input1" value="%{input}" size="23" maxlength="23" cssClass="form-control enter" required="required" />
   </div>

   <div id="desktop" class="left leftmargin">
        <button class="btn btn-primary btn-table-responsive " type="submit" name="button1" title="button1">
        </button>   
   </div>

</div>

Answer 1

这样的东西可能对你有用:

.dPad {
  position:absolute;
  display:inline-block;
  width:10%;background:#0f0
}
.inFlex {
  position:absolute;
  width:60%;
  left:20%;
  right:20%
}

<div>
  <div class="dPad" style="left:0px">left</div>
  <input type="text" class="inFlex" />
  <div class="dPad" style="right:0px">right</div>
</div>

唯一的问题是(没有间隙，或取决于间隙的大小)你不能在 <div> 之间有空格和 <input> .如果这样做，布局可能会中断。

这是另一个没有间隙的选项，但请注意标签之间没有空格。这很重要。

也是 <input> 上的默认边框和填充已删除，因为必须对其进行控制才能达到 100%(您不能相信浏览器对输入边框和填充所做的处理)。

.dPad {
  position:absolute;
  display:inline-block;
  width:15%;background:#0f0
}
.inFlex {
  position:absolute;
  width:69%;
  left:15%;
  right:15%;
  border:0px;
  padding:0.5em 0.5%;
  background:#ff0
}

<div><div 
  class="dPad" style="left:0px">left</div><input 
  type="text" class="inFlex" value="text field" /><div 
  class="dPad" style="right:0px">right</div></div>

为了获得固定宽度的间隙，您也可以通过将百分比值更改为 px 来实现。值然后使用 @media CSS 开关(类似于 @media all and (max-width:480px) 以调整不同屏幕尺寸下的 px 值。