как отобразить 3 поля ввода с кнопкой «Отправить текст» подряд

Question

как отобразить 3 поля ввода с кнопкой «Отправить текст» подряд

0

Ниже приведен код:

в этом коде 1-й ящик не приходит в другую, остальные 2 не имеют проблем

<div class="foo">
  <div class="bar">1<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
  <div class="bar"><input type="submit"></div>
</div>
</br>

  <div class="bar">2<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
  <div class="bar"><input type="submit"></div>
</div>

</br>
  <div class="bar">3<input id="J" type="textt" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
</div>
  <div class="bar"><input type="submit"></div>
</div>

& CSS

.foo {
  display: table;
  width: 100%;
}

.bar {
  display: table-cell;
}

.bar:first-child, input[type="text"] {
  width: 20%;
}

input {
  box-sizing: border-box;
}

Помощь по этому поводу.

user2294087 20 окт. 2013, в 07:46

Источник

0

Если вы хотите иметь макет таблицы и данные действительно являются таблицами, не стесняйтесь использовать таблицы.
vittore 20 окт. 2013, в 05:18

Теги:

html

css

css3

5 ответов

Ещё вопросы

Если вы хотите иметь макет таблицы и данные действительно являются таблицами, не стесняйтесь использовать таблицы.

Amit · Answer 1 · 2013-10-20T04-36-00.000Z

Измените класс foo на display:table для display:inline

Gildas.Tambo · Answer 2 · 2013-10-20T03-39-00.000Z

просто измените width с 20 20px на 29.5%

  .bar:first-child, input[type="text"] {
    width: 29.5%;
    }

ДЕМО: http://jsfiddle.net/LrshX/

gkalpak · Answer 3 · 2013-10-20T03-24-00.000Z

Я думаю, что вы не по карману. И вы перепутали (несколько) ваши HTML-теги, ваши стили CSS и т.д.
Что (я верю), что вам нужно, может быть достигнуто (среди многих способов) следующим образом:

HTML

<div class="foo">
    <div class="bar">
        1
        <input type="text" id="J1" class="textbox"
               autocomplete="off" autofocus />
    </div>
    <div class="bar"><input type="submit" /></div>
</div>
<br />
...

CSS

.foo {
    display: table;
    width: 100%;
}

.bar { display: table-cell; }

.bar:first-child { width: 20%; }

input[type="text"] { width: 80%; }

См. Также эту короткую демонстрацию.

Некоторые дополнительные замечания:

Не используйте один и тот же id для нескольких элементов в DOM, иначе вы, скорее всего, столкнетесь с неожиданным поведением.
Если вы используете autofocus во всех текстовых полях, то приёмник будет получать фокус.
Если вы хотите, чтобы кнопки submit на самом деле что-то делали, не забудьте включить их в form или связать их с помощью JavaScript.

Prabakaran Raja · Answer 4 · 2013-10-20T03-13-00.000Z

используйте таблицу вместо div. давать каждый вход в

    <td> <input type ="text"\> <\td>

тег

Alex Art. · Answer 5 · 2013-10-20T02-40-00.000Z

Проверьте этот скрипт

CSS:

.foo {
  display: block;
  width: 100%;
}
.row
{
    display:block;
}

.bar {
  display: inline-block;
}

input {
  box-sizing: border-box;
}

HTML:

<div class="foo">
      <div class = "row">
      <div class="bar"> 1
          <input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
      </div>
      <div class="bar"><input type="submit"/></div>
     </div>

    <div class = "row">
      <div class="bar"> 2
          <input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
      </div>
      <div class="bar"><input type="submit"/></div>
     </div>

      <div class = "row">
      <div class="bar"> 3
          <input id="J" type="text" style="width:40% height:20%" autocomplete="off" autofocus class="textboxx"/>
      </div>
      <div class="bar"><input type="submit"/></div>
     </div>

Если это сработало, пожалуйста, отметьте это как ответ. Спасибо