html - 似乎无法使文本和下拉列表对齐…？

无法将a和asp Dropdownlist对齐，请参见下面的HTML和CSS，它们一直相互重叠...我已经尝试了很多，但每次都失败了。

它如何以及应该如何：http://prntscr.com/7bzo0f

HTML：

<div id="header">
        <img id="logo" src="../Images/top2000.gif" />
        <div>
            <p id="teamNames">Tom, Rutger & Mike</p>
        </div>
        <asp:DropDownList ID="ddlJaar" CssClass="ddl" runat="server">
            <asp:ListItem Text="2014"></asp:ListItem>
            <asp:ListItem Text="2013"></asp:ListItem>
            <asp:ListItem Text="2012"></asp:ListItem>
        </asp:DropDownList>
    </div>

CSS：

 #header{
background-color: rgb(222,54,54);
width:100%;
height: 70px;
position:absolute;
}

#logo {
height: 50px;
margin-right: 50px;
margin-top: 8px;
}

.ddl {
background: #fff none repeat scroll 0 0;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
outline: medium none;
padding: 8px 15px;
position: relative;
transition: all 0.3s ease-out 0s;
width: 200px;
font-weight: 400;
float:right;
margin-top: 15px;
margin-right:20px;
}

#teamNames {
font-family: HelveticaNeue-Light;
font-size: 20px;
margin:0;
padding:0;
}

最佳答案

反转标题（下拉，div，img）中项目的顺序，并添加“ float：right;”对于div添加一些填充以固定水平对齐方式。

div {
    float: right; margin-top: 10px; margin-right: 10px;
}

见http://jsfiddle.net/8e3hhdxa/

关于html - 似乎无法使文本和下拉列表对齐…？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30582063/