1

ラジオボタンとチェックボックスが次のようになっているフォームがあります。 ここに画像の説明を入力してください

ボタンとラベルの間の距離をなんらかの方法で取り除くことができるかどうか知りたいです。また、ボタンをフォームの左端に移​​動するのも好きです。ほぼ質問番号の下。

これは現在、私のラジオボタンのCSSです。

.radio{
direction: ltr;
  padding: 0 5px 0 0px;
  display: block;
  clear: left;
  float: left;
}

また、私のフォーム全体は、cssで定型化された呼び出しの下で、次のように機能します。

/* ----------- stylized ----------- */
#stylized{
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
}
#stylized h1 {
    font-size:14px;
    font-weight:bold;
    margin-bottom:8px;
}

#stylized p{
    font-size:11px;
    color:#666666;
    margin-bottom:20px;
    border-bottom:solid 1px #b7ddf2;
    padding-bottom:10px;
}
#stylized label{
    display:block;   
    text-align:right;
    width:140px;
    float:left;
}
#stylized link {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    text-decoration:none;
    color: #FFA500;
}
#stylized .small{
    color:#666666;
    display:block;
    font-size:11px;
    font-weight:normal;
    text-align:right;
    width:140px;
}
#stylized input{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:200px;
    margin:2px 0 20px 10px;
    background-color: #EEE8AA
}
#stylized input:active { background: #FF7F00 !important; color: black; }
#stylized input:focus { background: yellow; color: black; }

#stylized select{
    float:left;
    font-size:12px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:205px;
    margin:2px 0 20px 10px;
    background-color:#C1FFC1;
    direction: ltr
}


#date select{
    float:left;
    font-size:10px;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:60px;
    margin:2px 0 20px 10px;
    background-color:#FFDAB9
}


#stylized textArea{
    float:left;
    font-size:10px;
    font-family: verdana,arial,sans-serif;
    padding:4px 2px;
    border:solid 1px #aacfe4;
    width:330px;
    height:100px;
    margin:2px 0 20px 10px;
    background-color: #EEDD82
}
#stylized textarea:active { background: #FF7F00 !important; color: black; }
#stylized textArea:focus { background: yellow; color: black; }
4

2 に答える 2

4

css スタイルの問題を処理する最善の方法は、Google Chrome でページを開き、問題のセクションを右クリックして [要素の検査] をクリックすることです。次に、右側のスタイル表示で選択したものを担当する css が表示されます。ページをリロードせずに、そこからこれらの項目を変更できます。

私がお勧めするのは、それを行うことです。次にdisplay: block;、右側のディスプレイにある で、それを に変更しdisplay: none;ます。必要な外観が得られるまで、このような小さな変更を全体に加えてから、実際の css を更新できます。

于 2012-09-25T12:05:28.500 に答える
0

ラベルのテキストを右揃えにしました:

#stylized label{
  display:block;   
  text-align:right;
  width:140px;
  float:left;
}

そのため、テキストはそのコンテナに正しく配置されています。

于 2012-09-25T14:56:19.320 に答える