CSS로 simple_form 입력란을 넓게 만드는 방법은 무엇입니까?

이것은 아마도 바보 같은 질문입니다. 우리는 simple_form 입력 필드를 더 넓게하려고 노력 중입니다. 우리는 div input {}에 몇 가지 옵션을 시도했지만 필드 폭 변화가 없었다CSS로 simple_form 입력란을 넓게 만드는 방법은 무엇입니까?

/* ----- 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

: 여기 GitHub의에 게시 된 simple_form의 CSS입니다. 어떤 부분이 입력 필드의 레이아웃인지 확실하지 않습니다. 위의 CSS를 수정하여 입력 필드를 더 넓게 만들 수 있습니까? 도와 주셔서 감사합니다.

출처

2013-08-23 user938363

추가 :

width: 600px:

사람 :

.simple_form의 div.input는 { }

는 예를 들어 600PX 확인하십시오. 자세한 내용은 Google "input .width CSS"를 참조하십시오.

텍스트 필드에만 적용하려면 input [type = text]

출처

2013-08-23 22:35:26 user2708672

시도해보십시오. 작동하지 않습니다. 대신 비율을 지정할 수 있습니까? – user938363

%를 사용할 수 있습니다. 특히 HTML (또는 erb HTML)을 보지 않고도 작동하지 않는 이유를 구체적으로 말할 수는 없습니다. – user2708672

깨달음 나는 CSS를 잘못 읽었습니다. 이렇게하십시오 : input {width : 600px :} 당신은 텍스트 필드에 대해서만 입력 [type = text] {}으로 좀 더 구체적으로 만들거나 입력에 클래스를주고 input.classname {}을 할 수 있습니다. – user2708672

CSS로 simple_form 입력란을 넓게 만드는 방법은 무엇입니까?

답변

관련 문제