인라인 블록 div의 정렬이 작동하지 않습니다.

아래에 표시된대로 하나의 선택 만 포함하는 div를 정렬하려고하지만 작동하지 않습니다. enter image description here 인라인 블록 div의 정렬이 작동하지 않습니다.

내가 수직 정렬을 선택하면 아무 일도 일어나지 않습니다. 다음은 class styled-select의 div와 select 내부의 CSS입니다.

div.styled-select { 

    width: 100px; 
    height: 17px; 
    overflow: hidden; 
    background: url(../../../../images/downarrow_blue.png) no-repeat right white; 
    display: inline-block; 
    position:relative; 
    float: left; 
    vertical-align: sub 
    } 

.styled-select select { 
    background: transparent; 
    -webkit-appearance: none; 
    width: 117px; 
    height: 17px; 
    border: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
    } 

// HTML code 
<p/> 
<form action="/prepareUpdateCategoryList.do?forwardto=search"> 

<fieldset class="block"> 

<label style="width:80px">Class</label> 
<div class="styled-select"> 
<select> 
    <option value="0">Select </option> 
    <option value="7382">steam </option> 
</select> 
</div> 

<input type="text" name="fname"> 
<input type="submit" value="Submit"> 
</fieldset> 
</form>

출처

2013-01-10 user1802439

정말 제대로이 대답하기 위해 모든 관련 마크 업을 참조 할 필요가있다. 이미지는 유용하지만 마크 업은 필수적입니다. 당신은 ** 모든 ** 컨테이너에있는 블록에'vertical-align : top'을 시도 할 수 있습니다. 한 블록에'vertical-align'이 설정되어 있지 않으면'line-height' 계산을 통해 주변 요소의 수직 위치에 영향을 줄 수 있습니다. – andyb

문제의 원인이되는 브라우저를 아는 것도 유용 할 수 있습니다. – Pebbl

크롬 및 파이어 폭 – user1802439

그냥 어떻게해도 상관없이 정렬하려면 margin-top을 사용하면됩니다.

div.styled-select { 
    width: 100px; 
    height: 17px; 
    overflow: hidden; 
    background: url(../../../../images/downarrow_blue.png) no-repeat right white; 
    display: inline-block; 
    position:relative; 
    float: left; 
    vertical-align: sub; 
    margin-top:5px; 
}

Fiddle here

출처

2013-01-13 05:34:27

인라인 블록 div의 정렬이 작동하지 않습니다.

답변

관련 문제