Jump to content
  • 0

Input по правому краю (без float:left)


ekkl
 Share

Question

Со вчерашнего дня пытаюсь найти решение. Нужно кнопку придвинуть к правому краю формы(родителя) не прибегая ко float

Это возможно? Вот мои эксперименты.

для кнопки установлены такие спили (рамочку и т.д. упустил)

input[type="submit"] {  width: auto;  position: absolute;  right: 0px;} 

Для формы

form {  padding: 2em 3em 0em 4em;  position: relative;}

Кнопка позиционируется по правому краю контейнера, в котором находится форма.

Если кнопку поместить в контейнер

<span style="display:block;position:relative"><input type="submit"></span>

Все в порядке, но его высота = 0px и ревизор фаерфокса показывает, что она отображается за пределами формы, что вполне согласуется с абсолютной позицией.

Вот http://jsbin.com/gowela/11/edit

Возможно ли сдвинуть эту кнопку к правому краю не помещая её в другой контейнер? И естественно, чтобы она не выходила за границы формы.

ПС. эксперименты с её position:reative тоже ни к чему не привели.

Edited by ekkl
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Да. Это для контейнера, в котором размещена кнопка, но я ищу способ, чтобы указать это именно для input.

Т.е. как я понял, есть форма, внутри неё кнопка, которая 1) должна быть без контейнера 2) должна к правому краю прижиматься? Т.е. форма и кнопка и всё, так? Если да, то чем не угодил absolute или float?

Link to comment
Share on other sites

  • 0
Т.е. форма и кнопка и всё, так? Если да, то чем не угодил absolute или float?

Нет, еще текстовые поля и т.д.

Просто во всех формах хочу чтобы кнопка отправки располагалась по правому краю.

Как раз absolute угодил, только в этом случае копка располагается по правому краю не формы, а контейнера, в котором расположена форма.

http://jsbin.com/gowela/12/edit

Ну вот что-то типа такого

form {  padding: 2em 3em 0em 4em;  position: relative;}input[type="submit"] {  width: auto;  position: absolute;  right: 0px;} 

h_1421053514_8496482_9e4c4ffce9.png

Link to comment
Share on other sites

  • 0

Ааа, ну всё ясно) Проблема в том, что вы задаёте элементу <form> правый padding, а absolute на этот padding не обращает внимание и проходит сквозь его. Как прописано в спецификации. Поэтому решений несколько:

 

1. Выставит кнопке right: (величина правого padding) + единица измерения (типа em, px и т.д., у вас 3em;)

2. Поместить весь контент/элементы и т.д. в форме в элемент <fieldset>, т.е. чтобы было так:

<form onsubmit="return false" action="http://some.ru"><fieldset>      <span class="icon user box">      <input type="email" name="email" placeholder="user">      </span>      <span class="icon pass box">      <input type="password" placeholder="password">      </span>      <span class="icon box">      <input type="password" placeholder="password">      </span>    <input type="submit">    </fieldset></form>

... и уже этому <fieldset> выставить position: relative;, а отступы оставить у самой <form>, как и сейчас.

 

Имхо, я бы выбрал именно второй вариант, он надёжнее и правильнее.

  • Like 1
Link to comment
Share on other sites

  • 0
Ну например, после него нужно будет добавлять clear:both; или что-то в этом роде

Совсем необязательно.

 

Ну и это же не блоковый элемент, чтобы его так позиционировать.

Т.е. вы ради сомнительных причин готовы заниматься извращениями вместо того, чтобы быстро сделать как надо и забыть об этом?

  • Like 1
Link to comment
Share on other sites

  • 0

 

Ну например, после него нужно будет добавлять clear:both; или что-то в этом роде

Совсем необязательно.

 

 

 

Ну и это же не блоковый элемент, чтобы его так позиционировать.

Т.е. вы ради сомнительных причин готовы заниматься извращениями вместо того, чтобы быстро сделать как надо и забыть об этом?

 

+1

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By gumuch
      Добрый день. Нуждаюсь в помощи/совете! 
      В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
      Сам сайт: http://2metra.com/
      Вот код который я прописал:
       
    • By мурамаса
      Добрый день, столкнулся с такой проблемой. Верстая страницу заключал изображения в тег <div> с определенным класом и в css, задаю им позицию какую хочу видеть у себя в браузере. например
      .content-bar2 { float: right; position: absolute; top: 300px; right: 50px; } Так вот когда я несколько элементов так размещаю, один над одним, то у меня в браузере все отоброжается нормально. Но открыв с другого компьтера, получилос так что одно изображение наезжает на другое, что это и с чем связано и как это вылечить. И если не сложно обьясните пожалуйста особенности position: absolute.
      Как я понимаю float и absolute вместе не работают ?
      Как я понимаю float и absolute вместе не работают ? 
      При том еще есть проблема, когда я уменьшаю окно браузера, контент как бы сжимается в непонятную хурму, друг на друга, как это исправить ?
    • By mr.relax
      Есть страница, c:
      body { 
      max-width: 1200px;
      margin: auto;
      }
      т.е. контент посередине. 

      Вопрос: есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется. 
      Ну например: окно браузера уменьшили...

      footer {
      position: fixed;
      bottom: 0;
      }

      "привязывает" <footer> к низу, но растягивает по ширине экрана.
    • By serzh82saratov
      Всем привет! Я тут новичок, не пинайте сразу если что.
      Требуется аналог position sticky для IE (в режиме совместимости с 7).
      Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

      То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.
      Надеюсь более менее объяснил, заранее спасибо.
      Забыл сказать, таких линий на форме 10 - 20 штук.
  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy