는 I 인라인 5 개 버튼 같은 것을 생성 수직

Question

시프트 일으키는 :

.button { 
 
    background-color: red; 
 
    transition: all .2s ease-in-out; 
 
    margin-left: 10px; 
 
    width: 110px; 
 
    height: 120px; 
 
    border-radius: 50%; 
 
    border: 4px solid #cfdcec; 
 
    box-shadow: 0 0 3px gray; 
 
}

<input type="submit" class="button" disabled value="1" name="example">

이제 문제는 I는 값을 넣으면 (Value="1") 버튼이 값이없는 버튼보다 높습니다.

참고 : Firefox를 사용해 보았는데 정상적으로 작동합니다.

Answer 1

이것은 수직 정렬 문제입니다. 같은 input, img 및 textarea 등

인라인 수준 요소는, 디폴트 값은 baseline입니다 년대 vertical-align 재산이 적용됩니다.

이 경우 입력에 텍스트를 추가하면 기준선이 이동하고 요소가 아래로 이동하여 기준선 맞춤이 선을 통해 유지됩니다.

기본값을 vertical-align: top 또는 다른 값으로 다시 지정하면 문제가 해결됩니다. MDN에서

.button { 
 
    background-color: red; 
 
    transition: all .2s ease-in-out; 
 
    margin-left: 10px; 
 
    width: 110px; 
 
    height: 120px; 
 
    border-radius: 50%; 
 
    border: 4px solid #cfdcec; 
 
    box-shadow: 0 0 3px gray; 
 
    vertical-align: top;  /* NEW */ 
 
    color: white;   /* for demo only */ 
 
}

<input type="submit" class="button" disabled value="" name="example"> 
 
<input type="submit" class="button" disabled value="" name="example"> 
 
<input type="submit" class="button" disabled value="1" name="example"> 
 
<input type="submit" class="button" disabled value="1" name="example">

자세한 내용 : https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align 일반적인 수직 정렬 문제는 단지 기본 그냥 클래스/ID에 속성을 정렬 정의를 추가하여 속성을 정렬 재정 의하여 해결 될 수

Answer 2

.