Question

这是一个简单的问题，但我无法解决它。我无法点击文本框并使其正常工作。
请在此处参考我的小提琴：http://jsfiddle.net/5JeaQ/

HTML：

<div id="container">
    <div id="form">
        <form id="lookup" method="post">
            <fieldset>
                <legend>Phone Directory</legend>
                <input type="text" id="name" placeholder="Enter name.." autocomplete="off"/>
                <span id="buttons">
                    <input type="submit" id="submit" value="Submit"/>
                    <input type="button" id="list_all" value="List All"/>
                </span>
            </fieldset>
        </form>
    </div>
    <div id="results"></div>
</div>

CSS：

#container{
    width: 30%;             
    margin: 0 auto;
    /*text-align: center;*/
}           
#name{
    display: block;
    /*margin: 0 auto;*/
}
#buttons{
    padding-top: 25px;
}
fieldset{
    border-radius: 10px;
}
td{
    text-align: center;
}

Answer 1

你的按钮有填充顶部。这是为什么？它似乎没有做任何事情，删除它可以解决你的问题。

fiddle

的CSS：

#container{
    width: 30%;             
    margin: 0 auto;
    /*text-align: center;*/
}           
#name{
    display: block;
    /*margin: 0 auto;*/
}

fieldset{
    border-radius: 10px;
}
td{
    text-align: center;
}
/*legend{
text-align: center;
}*/

Answer 2

删除此

#buttons{
    padding-top: 25px;
}

<强> Working Fiddle

Answer 3

试试这个

#buttons{
padding-top: 0px;

}

演示

http://jsfiddle.net/5JeaQ/8/

HTML文本框无效

3 个答案: