css - 如何修复 ASP.NET AjaxToolkit ComboBox 的样式？

Question

我是一名新的 ASP.NET 开发人员，我正在尝试使用 ASP.NET AjaxControlToolkit。我喜欢 ComboBox 控件，我正尝试在 its website HERE 中按原样使用它。 .

我只是将它拖放到我的简单页面中，然后将样式应用于它。但是，它没有像在其网站上那样正确显示。

ASP.NET 代码:

<div>
        <asp:ComboBox ID="ComboBox1" runat="server" DropDownStyle="DropDownList"
                            AutoCompleteMode="SuggestAppend" CssClass="AjaxToolkitStyle" AppendDataBoundItems="false">
                    <asp:ListItem>Select</asp:ListItem>
                    <asp:ListItem>All</asp:ListItem>
                </asp:ComboBox>
    </div>

CSS 代码:

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

body, div, p, h1, h2, h3, h4, ul, li, table
{
    margin:0;
    padding:0;
    border:none;
}
/* ComboBox styles */
#master_content .ajax__combobox_itemlist
{
    margin: 0px;
}

.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    background-image: url(ComboBox/images/toolkit-bg.gif);
    background-position: top left;
    border: 0px none;
    color: #FFFFFF;
    padding: 4px 0px 3px 5px;
    font-size: 13px;
    height: 16px;
    width: 240px;
}
.AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    background-image: url(ComboBox/images/toolkit-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 23px;
    width: 23px;
}
.AjaxToolkitStyle .ajax__combobox_itemlist
{
    border-color: #0F2543;
    background-color: #EFEFEF;
}

这是我所拥有的快照:

那么我该如何解决这个问题？

Answer 1

使用

position: relative;
top: -7px;

在 .AjaxToolkitStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer 输入中

相应地调整顶部