html - 输入按钮大悬停区域

我有简单的形式，它是在CSS样式。 JSfiddle链接：here<form action="" method="post" class="basic-grey"> <h1>Report a problem </h1> <label> <span>Your Name :</span> <input id="name" type="text" name="name" placeholder="Your Name" /> </label> <label> <span>Your Email :</span> <input id="email" type="email" name="email" placeholder="Valid Email Address" /> </label> <label> <span>Message :</span> <textarea id="message" name="message" placeholder="Specify The Problem"></textarea> </label> <label> <span>Subject :</span><select name="selection"> <option value="Job Inquiry">Job Inquiry</option> <option value="General Question">General Question</option> </select> </label> <label> <span>&nbsp;</span> <input type="submit" name="submit" value="Submit" class="button"> </label></form>这是CSS样式。问题是按钮的悬停区域较大（在左侧）。我上传了有关虚拟主机的示例。 here you can see what i think我尝试了position:absolute按钮，但是我无法更改位置。 Position:relative也不起作用。 .basic-grey { margin-left:auto; margin-right:auto; max-width: 500px; padding: 25px 15px 25px 10px; font: 12px Georgia, "Times New Roman", Times, serif; color: #000; text-shadow: 1px 1px 1px #FFF; } .basic-grey h1 { font-size: 25px; padding: 0px 0px 10px 40px; display: block; border-bottom:1px solid #C9C9C9; margin: -10px -15px 30px -10px;; color: #000; } .basic-grey h1>span { display: block; font-size: 11px; } .basic-grey label { margin: 0px; } .basic-grey label>span { float: left; width: 20%; text-align: right; padding-right: 10px; margin-top: 10px; color: #000; } .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select { border: 1px solid #DADADA; color: #000; height: 30px; margin-bottom: 16px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 3px 3px 3px 5px; width: 70%; font-size: 12px; line-height:15px; box-shadow: inset 0px 1px 4px #ECECEC; -moz-box-shadow: inset 0px 1px 4px #ECECEC; -webkit-box-shadow: inset 0px 1px 4px #ECECEC; } .basic-grey textarea{ padding: 5px 3px 3px 5px; } .basic-grey select { appearance:none; -webkit-appearance:none; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; width: 70%; height: 35px; line-height: 25px; } .basic-grey textarea{ height:100px; }.basic-grey.button { opacity:0.7; background: #55596C; padding: 10px 15px 10px 15px; color: #FFF; box-shadow: 1px 1px 5px #B6B6B6; border-radius: 3px; text-shadow: 1px 1px 1px #000; cursor: pointer; }.basic-grey.button:hover { opacity:0.7; background: #373E4D; } 最佳答案 这是由 引起的，您的按钮被包含在其中。只需将其包含在div中即可：<div> <span>&nbsp;</span> <input type="submit" name="submit" value="Submit" class="button"></div>如果您希望此div与标签相同，则可以为其指定一个CSS类，例如class =“ label”并将相同的CSS属性分配给“ div.label”和“ label”。