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

彼此相隔的街区

css html

-2

Daiaiai · 技术社区 · 7 年前

<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方向上是列和行的混合

2 回复 | 直到 7 年前

Girisha C 7 年前

想想如果你不能触摸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>

Girisha C 7 年前

希望您没有使用任何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>