Question

请有人告诉我我缺少的东西：

我的提交按钮，即使它意味着100％，但不是。我只是想不出来。这是我的代码和我的JSFiddle：http://jsfiddle.net/1hhw6skx/

HTML：

<div class="inforight-contact">

<form action="contact-sent.php" method="post" enctype="multipart/form-data" name="form" id="form">
<p>

<label class="input">
<span>Name</span>
<input type="text" name="Name" id="Name" class="name"/>
</label>
</p>
                  <p>
<label class="input">
<span>Email</span>
<input type="text" name="Email" id="Email" class="email" />
</label>
</p>


       <p>
<label class="input">
<span>Subject</span>
<input type="text" name="Subject" id="Subject" class="subject" />
</label>
 </p> 

      <p>
        <label for="fileField">Comments:</label>
        <label for="Comments"></label>
        <textarea name="Comments" id="Comments" class="comments" cols="90" rows="4"></textarea>
      </p>
      <p>
       <button type="submit" id="submit" class="submit"> Submit </button>
      </p>
    </form>

    </div>

CSS：

form {
margin-right: 28px;
}

form label
{
display: block;
text-align: left;
margin-top: 0px;
padding-bottom: 5px;
}

form .submit {
-webkit-appearance: none;
border: 0;
background: #EA5310;
width: 100%;
border-radius: 0.50em;
padding: 0.7em 1em;
box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
font-family: "Roboto",sans-serif;
font-size: 10pt;
font-weight: lighter;
color: #fff;
outline: none;
cursor: pointer;
display: inline-block;
text-align: center;
}

    form .submit:hover {
            -webkit-appearance: none;
            border: 0;
            background: #EA5310;
            width: 100%;
            border-radius: 0.50em;
            margin: 0em 0em;
            padding: 0.7em 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: "Roboto",sans-serif;
            font-size: 10pt;
            font-weight: lighter;
            color: #fff;
            outline: none;
            cursor: pointer;
            opacity: 0.7;
            text-align: center;
        }

form input.name,
        form input.email,
        form input.tel,
        form input.subject {
            -webkit-appearance: none;
            border: 0;
            background: #f3f4f5;
            width: 100%;
            border-radius: 0.50em;
            margin: 0em 0em;
            padding: 0.7em 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: "Roboto",sans-serif;
            font-size: 10pt;
            font-weight: lighter;
            color: #777;
            outline: none;
        }


form textarea.comments {
            -webkit-appearance: none;
            border: 0;
            background: #f3f4f5;
            width: 100%;
            border-radius: 0.50em;
            margin: 0em 0em;
            padding: 0.7em 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: "Roboto",sans-serif;
            font-size: 10pt;
            font-weight: lighter;
            color: #777;
            outline: none;
        }

Answer 1

这是因为形式边缘权利。删除它你的提交按钮将成为100％;和textarea填充和输入文本的更改

form {
    margin-right: 28px;
}

点击此处更新Fiddle。

Answer 2

在此你必须改变这个

form {
margin-right: 0px;
}
form input.name, form input.email, form input.tel, form input.subject,form textarea.comments
{
padding:0.7em 0;
}

在此之后得到你想要的东西试试this fiddle

提交按钮不会100％坐

2 个答案: