0

CSS は初めてですが、このレイアウトを作成しようとしています。

レイアウト

私はこれを試してみましたが、これが私が持っているコードです:

http://jsfiddle.net/cskQ8/

さて、これは基本的なことですが、何が間違っているのでしょうか?

Ps 私はこれが任意の高さのフィールド (つまり、非常に高い) に対応することを望みます

4

4 に答える 4

1

追加.fieldwrapper{display:inline-block}

divはブロック要素なので次の行に表示されるのでインラインブロックにして同じ行に流し込みます。

デモはこちら

簡単な形式では、入力の周りのdivを削除して、以下のように書くことができます

    <div class="r6 dc3 ts2 p4">
    <label field_id="None" for="sender">Sender email address</label>
    <input class="field r2 lft dc1 tc5 ts3" placeholder="Email" type="text" value="">
    </div>​

.lft { float: left; }
ul, li { list-style-type: none; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; overflow:auto}
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; padding-left:5px; margin-right: 15px; width:250px; }
label{float:left; padding-right:15px}

デモhttp://jsfiddle.net/cskQ8/11/

于 2012-10-09T09:19:27.707 に答える
1

ラベルとフィールドの周りに「行」ラッパーが必要です。

次に、ラベルを左に、フィールドを右にフロートします。

フロートをクリアするには、「行」をoverflow: hidden;

.formRow {
    background: #eee;
    width: 90%;
    padding: 5px 5% 5px 5%;
    overflow: hidden;
}

.formRow label {
    float: left;
}   

.formRow .field{
    float: right;
} 

<div class="formRow">
    <label field_id="None" for="sender">Sender email address</label>
    <input class="field r2 lft dc1 tc5 ts3" placeholder="Email" type="text" value="">
</div>

これは非常に基本的な例です。ここで幅と高さをいじることができます - http://jsfiddle.net/spacebeers/cskQ8/8/

于 2012-10-09T09:20:12.750 に答える
0

与えられた例では を使用していますinline-block。ただし、画像は、テキストが垂直方向に中央揃えになっていることを示しています。そのために使えますdisplay: table-cell。

例: http://jsfiddle.net/cskQ8/12/

于 2012-10-09T09:32:53.920 に答える
0

これを試してみてください。サイズ、パディング、色を編集する必要があるかもしれません....

css =>

@charset "utf-8";

    body{
       margin:auto;/*for aligning*/
       padding:0; /*for squeezing in txt*/
       height:100%; /*100% used to fill windows height*/
       behaviour:url(csshover.htc);

    }

    .header{
       margin:auto;/*for aligning*/
       padding:5px;
       height:30px;
       width:100%;
       background-color:#808080;
    }
    .header .holder{
        margin:auto;
       padding:0;
       height:30px;
       width:1018px;
       background-color:#333333;
    }

    .lft {
        float: left; 
    }

    ul, li {
        list-style-type: none; 
    }

    .tc5 {
        color:black;
    }



    .r2 {
        border-radius: 2px; 
        -moz-border-radius: 2px; 
        -webkit-border-radius: 2px; 
    }



    .field {
         line-height:27px; 
         font-family:arial, sans-serif; 
         border-color: blue; 
         border-top:solid 1px #c0c0c0; 
         padding-left:5px; 
         margin-right: 15px; 
         width:250px; 
    }

html =>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="new.css" rel="stylesheet" type="text/css" />    
</head>    
<body>
    <div class="header">
        <div class="holder">
            <label field_id="None" for="sender"align="left">Sender email address</label>
            <input class="field r2 lft tc5 " placeholder="Email" type="text" value="">
            <div class="fieldwrapper">   
            </div>
        </div>
    </div>    
</body>
</html>
于 2012-10-09T10:01:44.190 に答える