代码之家  ›  专栏  ›  技术社区  ›  Daiaiai

彼此相隔的街区

  •  -2
  • Daiaiai  · 技术社区  · 6 年前

    <fieldset>
      <label for="username" class="text">
        Dein Benutzername<span class="req">*</span>
      </label>
      <div class="div_text">
        <input name="username" type="text" id="username" value="" class="textbox" required="">
      </div>
      <label for="first_name" class="text">
        Vorname<span class="req">*</span>
      </label>
      <div class="div_text">
        <input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
      </div>
      <label ....
    

    我需要输出一个具有两个相同宽度的列,其中标签位于相应div块的上方,下一个输入div块及其相应标签位于其旁边。

    我添加了一个图片来显示我想要的。我遇到了问题,因为label标记与div块位于同一层次结构级别,因此我不能使用inline块,也不能使用flexbox,因为它在flex方向上是列和行的混合 desired output

    2 回复  |  直到 6 年前
        1
  •  1
  •   Girisha C    6 年前

    想想如果你不能触摸HTML

    .text,
    .div_text {
      width: 50%;
      display: block;
    }
    fieldset {
      display: flex;
      flex-wrap: wrap;
    }
    label {
      display: block;
    }
    label[for=username] {
      order: 1;;
    }
    label[for=first_name] {
      order: 2;
    }
    fieldset div:nth-of-type(1){
      order: 3;      
    }
    fieldset div:nth-of-type(2){
      order: 4;
    }
    label[for=sur_name] {
      order: 5;
    }
    label[for=example] {
      order: 6;
    }
    fieldset div:nth-of-type(3){
      order: 7;
    }
    fieldset div:nth-of-type(4){
      order: 8;
    }
    <fieldset>
      <label for="username" class="text">Dein Benutzername<span class="req">*</span></label>
      <div class="div_text">
        <input name="username" type="text" id="username" value="" class="textbox" required="">
      </div>
      <label for="first_name" class="text">Vorname<span class="req">*</span></label>
      <div class="div_text">
        <input name="first_name" type="text" id="first_name" value="" class="textbox" required="">
      </div>
      <label for="sur_name" class="text">Nachname<span class="req">*</span></label>
      <div class="div_text">
        <input name="sur_name" type="text" id="sur_name" value="" class="textbox" required="">
      </div>
      <label for="example" class="text">Weiters Beispiel<span class="req">*</span></label>
      <div class="div_text">
        <input name="example" type="text" id="example" value="" class="textbox" required="">
      </div>
    </fieldset>
        2
  •  0
  •   Girisha C    6 年前

    希望您没有使用任何css框架,请查看下面的自定义标记和css工作代码段,希望对您有所帮助:)

    body {
      font-size: 14px;
      font-family: sans-serif;
    }
    fieldset {
      clear: both;
      max-width: 500px;
      border: 1px dashed deeppink;
    }
    legend {
      color: #fff;
      font-size: 14px;
      padding: 5px 10px;
      background: deeppink;
      margin: 0 0 10px 15px;
    }
    .form-group {
      width: 45%;
      float: left;
      padding: 0 2.5%;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="text"] {
      width: 100%;
      font-size: 14px;
      padding: 5px 3px;
      margin-bottom: 10px;
      border: 1px solid #000;
      box-sizing: border-box;
    }
    <fieldset>
      <legend>Fieldset Container</legend>
      <div class="form-group">
        <label for="labelX">Label x</label>
        <input id="labelX" type="text" placeholder="Label X" />
      </div>
      <div class="form-group">
        <label for="labelY">Label y</label>
        <input id="labelY" type="text" placeholder="Label Y" />
      </div>
      <div class="form-group">
        <label for="labelZ">Label z</label>
        <input id="labelZ" type="text" placeholder="Label Z" />
      </div>
      <div class="form-group">
        <label for="labelXX">Label xx</label>
        <input id="labelXX" type="text" placeholder="Label XX" />
      </div>
    </fieldset>