使用 Css 和 HTML 创建输入文本答案

【问题标题】：Creating Input Text using Css and HTML使用 Css 和 HTML 创建输入文本
【发布时间】：2016-12-22 10:44:56
【问题描述】：

我需要一个带有两行文本框的 div 标签。

第一行有3个输入文本框，宽高按百分比计算。

同样在第二行我需要 2 个输入文本框。由于我有两个输入框，因此该区域应分为 2 个块，每个块 50%。

我是 CSS 和 HTML 的新手。

我尝试了一些代码。但是，没用！

#div1
{
    position: absolute;
}
#div1 text
{
    display:inline;
    float:left;
    margin:33%
}
#div2
{
    position: relative;
}
#div2 text
{
    display:inline;
    float:left;
    margin:50%
}
</style>
</head>
<body>
    <div id="div1">
        <input type="text" name="txtbox1" class="clstxtbox1"/>
        <input type="text" name="txtbox2" class="clstxtbox1" />
        <input type="text" name="txtbox2" class="clstxtbox1" />
    </div>
    <div id="div2">
        <input type="text" name="txtbox1" class="clstxtbox2" />
        <input type="text" name="txtbox2" class="clstxtbox2" />
    </div>
</body>

谁能帮帮我

【问题讨论】：

有 3 个答案，您没有接受一个。您接受一个答案还是在脑海中添加图像？

标签： html css

【解决方案1】：

你可以使用 css3 flexbox:

HTML：

<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox1"/>
  ...
  ...
  <input type="text" name="txtbox2" class="clstxtbox1" />
</div>

CSS：

.input-holder {
  display: flex;
}

.input-holder input {
  flex-grow: 1;
}

.input-holder {
  margin-bottom: 10px;
  display: flex;
}

.input-holder input {
  flex-grow: 1;
}

<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox1"/>
  <input type="text" name="txtbox2" class="clstxtbox1" />
  <input type="text" name="txtbox2" class="clstxtbox1" />
</div>
<div class="input-holder">
  <input type="text" name="txtbox1" class="clstxtbox2" />
  <input type="text" name="txtbox2" class="clstxtbox2" />
</div>

这是另一个变体：

HTML：

<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox1"/>
  </div>
  ...
  ...
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
</div>

CSS：

.input-holder {
  display: flex;
}

.input-holder div {
  flex-grow: 1;
}

.input-holder div input {
  display: block;
  width: 100%;
}

.input-holder {
  margin-bottom: 10px;
  display: flex;
}

.input-holder div {
  padding: 5px;
  flex-grow: 1;
}

.input-holder div input {
  display: block;
  width: 100%;
}

<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox1"/>
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox1" />
  </div>
</div>
<div class="input-holder">
  <div>
    <input type="text" name="txtbox1" class="clstxtbox2" />
  </div>
  <div>
    <input type="text" name="txtbox2" class="clstxtbox2" />
  </div>
</div>

【讨论】：

你能告诉我，如何添加这个隐藏的sn-p
meta.stackoverflow.com/questions/271762/…
在sn-p的第一行把hide: true改成false。
@JishnuVS 你知道了吗？
@MuhammadUsman 你已经明白了，但我希望 2 行文本框占据第一个的宽度。

【解决方案2】：

我猜你可以在 div 标签中使用表格标签。

您的答案可能如下所示，

<body>
  <div id="div1">
    <table>
      <tr>
        <td>
          <input type="text" name="txtbox1" class="clstxtbox1" />
        </td>
        <td>
          <input type="text" name="txtbox2" class="clstxtbox1" />
        </td>
        <td>
          <input type="text" name="txtbox2" class="clstxtbox1" />
        </td>
      </tr>
    </table>
  </div>
  <div id="div2">
    <table>
      <tr>
        <td>
          <input type="text" name="txtbox1" class="clstxtbox2" />
        </td>
        <td>
          <input type="text" name="txtbox2" class="clstxtbox2" />
        </td>
        <tr>
    </table>
  </div>
</body>

稍后您可以根据自己的意愿调整 td 标签的长度和宽度。希望这会有所帮助。

【讨论】：

我不想在表格中显示

【解决方案3】：

.second_row{
  margin-top:20px;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
 <div class="container">
 <div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text" name="txtbox1" class="clstxtbox1"/>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text" name="txtbox2" class="clstxtbox2"/>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text" name="txtbox3" class="clstxtbox3"/>
</div>
 </div>
 
 
 <div class="row second_row">
<div class="col-md-6 col-sm-6 col-xs-6">
<input class="form-control" type="text" name="txtbox1" class="clstxtbox1"/>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<input class="form-control" type="text" name="txtbox2" class="clstxtbox2"/>
</div>

</div>

希望这会有所帮助。

【讨论】：

嗨，我可以知道如何在 css 中做
你可以像@MuhammadUsman 给出的那样使用flexbox。如果你不想使用太多 CSS，你可以使用 bootstrap CSS Library。
好吧，我现在还没有接触到 bootstrap