Formgestaltung

[native]

Ich habe gerade ein Formular erstellt, auf Basis einer Liste. Bezeichnung von Felder steht in Label-Tags, das entsprechende Eingabefeld daneben. Soweit alles prima, so lange im rechten Bereich des Eingabefeldes nur etwas einzeiliges steht.
Steht da allerdings ein mehrzeiliger Text, beginnt dieser nach dem Zeilenumbruch unter dem Label-Tag linksbündig. Ich hätte gerne, dass der Text nach einem Zeilenumbruch genau wie die Zeile darüber rechts neben dem Label-Tag weitergeht. Lässt sich das überhaupt machen?

Untenstehend mein CSS.

Danke, native

===
fieldset ul {
margin: 0;
padding: 0;
}
fieldset ul li {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
padding-bottom: 4px;
height: auto;
}
fieldset ul li label {
width: 145px;
display: block;
float: left;
   font-weight: bold;
   vertical-align: top;
}

<form>
  <fieldset>
    <ul>
      <li>
        <label>Bezeichner</label>
        irgendein mehrzeiliger Text mit viel Gerede und bla bla
      </li>
    </ul>
  </fieldset>
</form>

[Beat]

<form>
  <fieldset>
    <ul>
      <li>
        <label>Bezeichner</label>

<p>

irgendein mehrzeiliger Text mit viel Gerede und bla bla

</p>

</li>
    </ul>
  </fieldset>
</form>

dazu dann auch
form li p{overflow:hidden}

mfg Beat

[Gunnar Bittersmann]

@@native:

nuqneH

in Label-Tags

Nö.

Lässt sich das überhaupt machen?

Wenn "irgendein mehrzeiliger Text mit viel Gerede und bla bla" in einem Element stehen würde ('p' bietet sich an), dann ja. Du gibst diesem 'margin-left: 145px' (gern auch etwas mehr, wenn du Abstand zwischen Label und Text haben möchtest).

Qapla'

[Marc]

Hallo naive,

nicht ausprobiert:

<form>  
  <fieldset>  
    <ul>  
      <li>  
        <p>  
          <label>Bezeichner</label>  
          irgendein mehrzeiliger Text mit viel Gerede und bla bla  
        </p>  
      </li>  
    </ul>  
  </fieldset>  
</form>  

Ansonsten (nicht probiert):

  
li {  
  text-indent: -145px; /* Oder mehr, besser em benutzen */  
}  
  
fieldset p {  
  padding-left: 145px;  
}

Viele Grüße,
Marc.

[Marc]

Hallo,
Sorry, da fehlte ien p: so ist es richitg

[code lang=css]
li p {
  text-indent: -145px; /* Oder mehr, besser em benutzen */
}

Viele Grüße,
Marc.