web-dev-qa-db-ja.com

CSSを使用して同じ行のラベルとテキストボックス

新しいasp.net mvc3アプリを作成すると、ログオンが取得され、テキストフィールドの上にラベルが付いたフォームが登録されます。ラベルとフィールドの両方が同じ行にあり、整列するように変更したい

以下は機能しません

@using (Html.BeginForm()) {
<div>
    <fieldset>
        <legend>Account Information</legend>

        <div class="editor-label">
            @Html.LabelFor(m => m.UserName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.UserName)
            @Html.ValidationMessageFor(m => m.UserName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.Password)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(m => m.Password)
            @Html.ValidationMessageFor(m => m.Password)
        </div>

        <div class="editor-label">
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe)
        </div>

        <p>
            <input type="submit" value="Log On" />
        </p>
    </fieldset>
</div>

CSS：

.display-label, 
.editor-label 
{
      display:inline-block;
      width: 200px;    
      text-align: right;   
      margin-right: 10px;

}

.display-field, 
.editor-field 
{
    display:inline-block;
     margin: 0.5em 0 0 0;
}
cssasp.net-mvc
20
user9969

通常、ラベルを左に浮かせ、その横に入力行を並べます。以下に例を示します。 http://jsfiddle.net/qXFLa/

コードを再配置する方法の例を次に示します。

<div class="editor">
  @Html.LabelFor(m => m.UserName)
  @Html.TextBoxFor(m => m.UserName)
  @Html.ValidationMessageFor(m => m.UserName)
</div>

次に、CSSの場合：

.editor label {
  float: left;
  width: 30px;   // just putting an example here - but give them a width to align better
  text-align: right; // this right-aligns them with the input
}

.editor input[type=text] {
  width: 80px; // just putting an example value in here to make your inputs uniform in length
  margin: 0 0 0 10px; // just some breathing room from the labels
}
18
kinakuta

私はこのCSSを使用しています

.editor-label
{   display: block;
    float: left; 
    padding: 0; 
    width: 150px;
    margin: 1em 1em 0 0;
}

.editor-field
{
    width:auto;
    margin: 0.5em 0 0 0;
    overflow: auto;
    min-height: 2em;
}
15
Pa0l0

Kinakutaの受け入れられた答えを試していませんが、Visual Studioで生成されたビューを再配置する必要があります。 自動生成されたレイアウトを再配置したくない場合、つまりフォーマットを保持するために、私は次のようにアプローチします

<div class="editor-label" />
<div class="editor-field" />

<div class="editor-label" />
<div class="editor-field" />

etc...

次のCSSが機能しているようです。改善を提供してください。 （Pa0l0による回答と非常によく似ています）

<style type="text/css">
    .editor-label, .display-label
    {
        clear:both;
        float:left;
        width:150px;
        margin:1em 0 0 0;
        font-weight:bold;
    }
    .editor-field, .display-field
    {
        margin:1em 0 0 0;   
        min-height:1.5em;
    }
</style>
1
joedotnot

これらの答えのいくつかは、私が探していたものではありませんでした。私のCSSのこのビットは、私のニーズに合っているようです。

input,
select,
textarea{
    display:inline-block !important;
}
0
Tyriddik