2015-02-27 3 views
1

Пожалуйста, может кто-то сказать мне, что я не хватает:кнопку Submit не будет сидеть на 100%

Моя кнопка отправки, даже если это означало сидеть на 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; 
     } 

ответ

0

Это из-за формы маржинальной права. Удалите его, кнопка отправки станет 100%; а также изменения в обивке TEXTAREA и ввода текста

form { 
    margin-right: 28px; 
} 

Fiddle проверка Обновлено здесь.

+0

Это не имеет никакого значения. – user3217495

+0

Check Fiddle я отредактировал в своем коде. – ketan

+0

Да, это взломало его. Спасибо!! – user3217495

0

в этом вы должны изменить этот

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

+0

Проблема с этим заключается в том, что текст, который пользователь вводит сейчас, сидит против края окна .... – user3217495

+0

, тогда попробуйте эту ссылку, в которой я просто изменение ширины кнопок все одинаково, так как сначала вы вводите свой вопрос. Попробуйте эту скрипку. http://jsfiddle.net/1hhw6skx/9/ – priya786

+0

Это неточно. Если вы масштабируете страницу, поле «отправить» не всегда выстраивается в линию. – user3217495

Смежные вопросы