0

simple_form 入力フィールドを広くしようとしています。GitHub に投稿された simple_form css は次のとおりです。

/* ----- SimpleForm Styles ----- */

.simple_form div.input {
  margin-bottom: 10px;
  clear: both; /* Required for Webkit, but not for Gecko */
}

.simple_form label {
  float: left;
  width: 100px;
  text-align: right;
  margin: 2px 10px;
}

div.boolean, .simple_form input[type='submit'] {
  margin-left: 120px;
}

div.boolean label, label.collection_radio_buttons {
  float: none;
  margin: 0;
}

label.collection_radio_buttons {
  margin-right: 10px;
  vertical-align: -2px;
  margin-left: 2px;
}

.field_with_errors {
  background-color: #ff3333;
}

.simple_form .error {
  clear: left;
  color: black;
  display: block;
  margin-left: 120px;
}

.simple_form .hint {
  clear: left;
  margin-left: 120px;
  color: #555;
  display: block;
  font-style: italic;
}

input.radio {
  margin-right: 5px;
  vertical-align: -3px;
}

input.check_boxes {
  margin-left: 3px;
  vertical-align: -3px;
}

label.collection_check_boxes {
  float: none;
  margin: 0;
  vertical-align: -2px;
  margin-left: 2px;
}

Or in SASS format:

/* ----- SimpleForm Styles ----- */

.simple_form
  div.input
    margin-bottom: 10px
    clear: both

  label
    float: left
    width: 100px
    text-align: right
    margin: 2px 10px

  .error
    clear: left
    color: black
    display: block
    margin-left: 120px

  .hint
    clear: left
    margin-left: 120px
    color: #555
    display: block
    font-style: italic

div.boolean, .simple_form input[type='submit']
  margin-left: 120px

div.boolean label, label.collection_radio_buttons
  float: none
  margin: 0

label.collection_radio_buttons
  margin-right: 10px
  vertical-align: -2px
  margin-left: 2px

.field_with_errors
  background-color: #ff3333

input.radio
  margin-right: 5px
  vertical-align: -3px

input.check_boxes
  margin-left: 3px
  vertical-align: -3px

label.collection_check_boxes
  float: none
  margin: 0
  vertical-align: -2px
  margin-left: 2px

でいくつかのオプションを試しましたdiv input {}が、フィールド幅に変化はありませんでした。入力フィールドのレイアウトがどの部分かわかりません。上記の CSS を変更して入力フィールドを広くするにはどうすればよいでしょうか?

4

1 に答える 1

1

追加：

width: 600px:

に：

.simple_form div.input { }

たとえば、600pxにするには。詳細については、Google の「input .width CSS」を参照してください。

テキスト フィールドにのみ適用する場合は、input[type=text] を使用します。

于 2013-08-23T22:35:26.103 に答える