Question

我正在学习css和我试图绘制一个有3列的表格，但我有一些困难。

首先我使用3个字段集并且我在左边漂浮每个，这是正确的吗？或者例如，我们应该将左边的前两列和右边的最后两列浮动吗？

然后我试图对布局做一些事情，但我有一些困难才能正确实现它。第一列和第二列没关系我想要这个布局：

Product                  User

InputTextBelowSpan       InputTextBelowSpan

但是第三列我想要一些不同的东西，其中span和输入是内联的，如下所示：

Product               User                 hashcod  InputTextInlineWithSpan

InputTextBelowSpan   InputTextBelowSpan    hashcod  InputTextInlineWithSpan

但是我在执行此操作时遇到一些困难，输入低于第一列和第二列中的输入，输入与第三列中的跨度内联。难点是使用百分比使所有输入具有相同的宽度，因此布局会影响浏览器宽度。

你知道怎么做吗？

这就是我所拥有的：

https://jsfiddle.net/e8fh5beb/

HTML：

<div class="container">
  <form class="form">

    <fieldset class="form_left">
      <label>
        <span>Product</span>
        <input type="text"/>
      </label>
      <label>
        <span>Cod</span>
        <input type="text"/>
      </label>
    </fieldset>

    <fieldset class="form_left ">
      <label>
        <span>User</span>
        <input type="text"/>
      </label>
      <label>
        <span>ID</span>
        <input type="text"/>
      </label>
    </fieldset>

    <fieldset class="form_left last">
      <label>
        <span class="hashcod">hashcod</span>
        <input class="hashcod" type="text"/>
      </label> 
      <label>
        <span class="hashcod">hashcod</span>
        <input class="hashcod" type="text"/>
      </label> 
    </fieldset>

  </form>
</div>

的CSS：

*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}

.container{
  width:100%;
  float:left;
}

.form{
    float:left;
    width: 100%;
}

.form_left{
    float:left;
    border:1px solid yellow;
    width: 32%;
    margin-right: 2%;
}

.form_left.last{margin-right:0;}


fieldset{border:0;}
label{width:100%; margin-bottom: 20px; display: block;}
label span{display:block; margin-bottom: 8px; color:#717f86;}
input{padding: 10px; width: 100%;}

.hashcod{
  display:inline-block;
}

与输入文本相关的内联和块的形式

0 个答案: