内嵌块div对齐不起作用

我想对齐只包含一个选择的div，如下所示，但它不起作用。 enter image description here 内嵌块div对齐不起作用

无论我选择vertical-align选项，什么都不会发生。下面是类风格选择和内部选择的div的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

真的需要看到所有相关的标记，以便正确地回答这个问题。该图像很有用，但标记是必不可少的。您可以尝试** all **容器中的块的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对齐不起作用

回答

相关问题