입력 상자 옆에있는 아이콘/이미지 정렬

Ive는 맨 위의 행 옆에 아이콘 (종이 클립)을 갖기 위해 다음과 같은 양식을 가지고 있습니다. 맨 위 행은 그룹에서 서로 옆에 정렬 된 두 개의 버튼입니다. 이것에 UIKit 사용하기. 임 투쟁이 버튼 옆에있는 아이콘을 정렬하는 것입니다 무엇입력 상자 옆에있는 아이콘/이미지 정렬

. 그냥 그것을 플로트하려고 그래서 그것은 아무것도 크기를 조정해서는 안됩니다. 내가 한 일의 발췌는 그러나 React 렌더링이 순수한 HTML이 아닌 렌더링을 제공한다는 것도 알려줍니다.

 <div className="uk-margin-large-top"> 
      <form id={"form_element_"} className="uk-form uk-width-4-5 uk-align-center"> 
       <fieldset> 
        <div className="uk-form-row textbox-margin"> 
         <label htmlFor={"label_"} className={r.requiredClass}>{this.props.fieldLabel}</label> 
         <div className={"uk-form-controls uk-button-group uk-display-block"} data-uk-button-radio> 
          {buttons} 
         </div> 
        </div> 
       </fieldset> 
      </form> 
      <i className="uk-icon-small uk-icon-paperclip"></i> 
     </div>

하는 SCS는 아래와 같습니다

.uk-margin-large-top { 
    margin-top: 50px !important; 
} 

.uk-align-center { 
    margin-left: auto; 
    margin-right: auto; 
} 
[class*="uk-align-"] { 
    display: block; 
    margin-bottom: 15px; 
} 

.uk-width-4-5, .uk-width-8-10 { 
    width: 80%; 
} 
[class*="uk-width"] { 
    box-sizing: border-box; 
    width: 100%; 
} 

.uk-display-block { 
    display: block !important; 
} 

.uk-button-group { 
    font-size: 0; 
} 

.uk-icon-small { 
    font-size: 150%; 
    vertical-align: -10%; 
}

수직 중심에 가장 좋은 방법은 CSS3의 상단에있는 두 개의 버튼의 오른쪽에이 아이콘이 무엇

출처

2016-10-24 nixgadgets

나는 당신의 uikit 등을 재현 할 방법이 없지만 블럭 레벨 요소 (양식)와 인라인 요소 (i)를 가지고 있으며 둘 다'display : inline-block'이어야합니다 –

아직 HTML을 이해하지는 못했지만 CSS 위치 지정 또는 pseudo-element : before 및 : after를 사용해보십시오.

어쩌면 옆에 가져 오려고하는 버튼에 uk-icon-small uk-icon-paperclip 클래스를 추가하십시오.

출처

2016-10-24 04:08:14 twist

입력 상자 옆에있는 아이콘/이미지 정렬

답변

관련 문제