Я пытаюсь сделать свою форму входа в одну строку с адресом электронной почты слева, паролем справа и кнопкой отправки справа от него. Сейчас это выглядит так:

enter image description here

Как я могу сделать так, чтобы вся форма была в одной строке, начинающейся со строки «Забыли пароль?» в крайнем левом углу, затем адрес электронной почты, затем пароль, а затем кнопка входа в систему справа? Вот код:

<template name='entrySignIn'>
  <div class="container">
    <div class="row">
      {{#if logo}}
        <div class="entry-logo">
            <a href="/"><img src="{{logo}}" alt="logo"></a>
        </div>
      {{/if}}
      <div class="entry-sign-in">
        {{#if otherLoginServices}}
        <div class="entry-social">
          {{#each loginServices}}
            {{> entrySocial}}
          {{/each}}
          {{#if passwordLoginService}}
          <div class="email-option">
            <strong class="line-thru or-sign-in">{{i18n "OR"}}</strong>
          </div>
          {{/if}}
        </div>
        {{/if}}
        {{> entryError}}
        {{#unless otherLoginServices}}
        {{/unless}}
        {{#if passwordLoginService}}
          <form class="entry-form" id='signIn'>
            <div class="form-group">
              <input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
            </div>
            <div class="form-group">
              <input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
            </div>
            <p><a href="/forgot-password">{{i18n "forgotPassword"}}</a></p>
            <button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
          </form>
        {{/if}}

      </div>
    </div>
  </div>
</template>

Я попробовал предложение Джейсона, и оно вроде сработало, но теперь оно выглядит так:

enter image description here

Кто-нибудь знает, как это исправить?

1
5AMWE5T 7 Мар 2014 в 23:38

2 ответа

Лучший ответ

Я бы посоветовал поместить элементы управления в таблицу. Например:

<form class="entry-form" id='signIn'>

<table>
   <tr>
      <td>
          <div class="form-group">
              <input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
          </div>
     </td>
     <td>
         <div class="form-group">
            <input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
         </div>
     </td>
  </tr>
  <tr>
     <td colspan = "2"> 
        <div class="form-group">
          <input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
        </div>
    </td>
  </tr>
  <tr>
    <td colspan = "2">
       <button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
    </td>
  </tr>
</table>
</form>

Хотя я не знаю, что это за другая разметка ({{#if passwordLoginService}}). Руль? Он все еще должен работать с этим.

0
jason 7 Мар 2014 в 20:02

Это похоже на бутстрап. Если это так, попробуйте использовать встроенный класс формы, найденный здесь http://getbootstrap.com/css/ #form-inline

<form class="entry-form form-inline" id='signIn'>
            <div class="form-group">
              <input autofocus name="email" type="{{emailInputType}}" class="form-control" value='{{email}}' placeholder="{{emailPlaceholder}}">
            </div>
            <div class="form-group">
              <input name="password" type="password" class="form-control" value='{{password}}' placeholder="{{i18n 'password'}}">
            </div>
            <p><a href="/forgot-password">{{i18n "forgotPassword"}}</a></p>
            <button type="submit" class="submit btn btn-success">{{i18n "signIn"}}</button>
          </form>
2
landland 7 Мар 2014 в 22:13