Question

我需要一个带有两行文本框的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>

任何人都可以帮助我

Answer 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>

Answer 2

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

您的回答可能如下所示，

＆＃13;

<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>

＆＃13;

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

Answer 3

＆＃13;

.second_row{
  margin-top:20px;
}

＆＃13;

 <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>

＆＃13;

希望这有帮助。

使用Css和HTML创建输入文本

3 个答案: