Как сохранить поля ввода в одной строке при центрировании DIV, который их содержит?

Question

Как сохранить поля ввода в одной строке при центрировании DIV, который их содержит?

Я дал этот класс CSS некоторым полям ввода

.searchField {
    display: inline-block;
}

это их базовый HTML ...

<div id="searchForm">
Search For Results<br> 
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
    <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
    <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form> </div>

однако, несмотря на то, что есть достаточно горизонтальный экран недвижимости, один из них продолжает оборачиваться к следующей строке, как показывает эта скрипка -https://jsfiddle.net/3mwn14fk/ . Как сохранить эти элементы в одной строке (при условии, что ширина браузера достаточна)? Обратите внимание, что я также хочу сохранить DIV они находятся внутри вертикально и горизонтально по центру.

Edit: вот что я вижу в скрипке. Это на Firefox. Примечание текстовые поля находятся не на одной линии.

Edit 2

на скрипке Моники, это то, что я вижу. Обратите внимание, что первый naem и фамилия находятся в одной строке, но текстовое поле события находится в следующей строке. Я хотел бы, чтобы все три были на одной линии, даже если черный ящик, содержащий их для расширения

8

block css display html inline

автор: thepio

10 ответов

автор: thepio · Accepted Answer · 2016-09-02 18:29:24

просто чтобы дать вам альтернативу, вы могли бы использовать flexbox для достижения того, что вы хотите. Вот краткое демо:

/* Just some basic CSS declarations to start with */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 100%;
  min-height: 100%;
}

h4 {
  margin: 5px 0; /* Just to make the demo look nicer */
}

#loginArea {
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #CCCCCC;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80%; /* You could use anything here, depending if you have a wrapping parent etc */
}

#search-form {
  position: relative;
  display: flex;
  align-items: center; /* Not necessary but will center the items */
  flex-direction: row; /* Not necessary but tells that they should be in a row */
  justify-content: flex-start; /* Will align items to left on larger screens */
  flex-wrap: wrap; /* Will allow the flex inputs to wrap on smaller screens */
}

#search-form > * { /* You could give a class or element instead of asterix */
  margin: 0 10px 5px 0; /* Just to make it look nices */
  width: 25%; /* Width of text inputs, you could set them different from each other */
  min-width: 100px; /* Min width to wrap elements when small screen */
  flex: 1;
}

#search-form .search_button {
  max-height: 20px;
  flex: 0 0 20px; /* Keep the magnifying class proportioned/20px wide */
  min-width: 0px; /* Do not use the min-width declared above */
  margin: 0 0 5px 0;
}

<div id="loginArea">
  <div id="searchForm">
    <h4>
      Search For Results
    </h4>
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
      <input name="utf8" type="hidden" value="✓">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="http://image.flaticon.com/icons/png/128/49/49116.png" class="search_button">
    </form>
  </div>
</div>

Я установил область входа в систему шириной 80%, но вы можете изменить это любым способом, который вы хотите, конечно. Я тоже min-width входов до 100 пикселей - за исключением последнего-так что он будет хорошо обернуться на меньших экранах. Я также установил max-width для входов, чтобы они не росли бесконечно и формы поиска justify-content: flex-start; выровняет их влево на больших экранах.

также поддержка flexbox в браузерах может быть улучшена с помощью установки префиксов, таких как -webkit- и -ms- etc к объявлениям CSS.

JSFiddle, чтобы играть с

поддержка браузера для flexbox

автор: Mohammad Usman · Accepted Answer · 2016-09-02 06:15:55

использовать inline-block для детей white-space: nowrap на родителя. Это предотвратит заворачивание детей в следующую линию.

Примечание: пожалуйста, смотрите фрагмент в режиме полной страницы.

#loginArea {
  white-space: nowrap;
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.searchField {
  display: inline-block;
  vertical-align: top;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results<br> 
    <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
      <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
      <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
      <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
      <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
    </form>
  </div>
</div>

автор: Jonathan Slattery · Accepted Answer · 2016-09-03 02:15:46

есть несколько способов добиться этого, с разной степенью успеха, в зависимости от используемого метода:

@Muhammad вариант использования display: inline-block; на входах и заставляя контейнер игнорировать перенос текста с помощью white-space: no-wrap; тут работа для достижения вашей цели принуждения все на одной линии;

, это ограниченное решение в том, что ваши элементы будут любым размером по умолчанию, продиктованным браузером, и потому, что контейнеры будет иметь чрезмерный размер и не в положении на некоторых устройствах / разрешениях / размерах окон и т. д. (в конечном счете, пользовательский интерфейс не был рассмотрен)

реализация CSS Flex-box также является еще одним способом, и реализация браузера становится намного ближе к тому, что это будет твердый вариант в будущем, и да, он может быть довольно хорошо реализован во многих браузерах с определенными резервными CSS и / или JavaScript-Шимами (возможно, предоставляемыми фреймворком и т. д.), Но предполагая, что вы хотите пуленепробиваемое покрытие, которое просто работает, используйте небольшую математику для расчета некоторых процентных Ширин, используйте поплавки и добавьте тире медиа-запросов для достижения вашей цели:

вот CSS и заметки для этого, ниже

и вот это Скрипка, чтобы попробовать его. (Я установил цвет контейнера для изменения с точками останова, поэтому попробуйте изменить размер окна.)

/* Control the box-model: (makes assigned widths predictable) */
* { box-sizing: border-box; }

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/* Default Styles (at full width)
   Assign calculable sizes to the form fields:
   We have 3 fields (1 double-sized) and a button:
   So, 1+1+2+1 = 5; Dividing 100% container-width by 5 = 100/5 = 20%;
   we need spacing between (think margin-right),
   so, shave each element down 1% and set the margin-right to 1%;
   then specifically set the double-width entry separately (40% = 39% + 1%)
*/ 
#searchForm input {
   float: left;
   width: 19%;
   margin: .25em 1% .25em 0;
}
#searchForm input#my_object {
   width: 39%;
}

/* Applying Media Queries to give friendlier form layouts
   by using alternative field sizes for better user experience
   at different break-point sizes (indicated by varying background color */

/* Mobile Styles */
@media only screen and (max-width : 480px) {
   #loginArea {background-color:red;}

   /*Full-width, no margin, stacked; */
   #searchForm input {
     width: 100%;
     margin-right: 0;
   }
   #searchForm input#my_object {
     width: 100%;
   }

}

/* Phablet (In-between-sized mobile styles)
   -- in this case, same as mobile for consistency)
*/
@media only screen and (min-width : 481px) and (max-width : 767px) {
   #loginArea {background-color:yellow;}

   /*Full-width, no margin, stacked; */
   #searchForm input {
     width: 100%;
     margin-right: 0;
   }
   #searchForm input#my_object {
      width: 100%;
   }
}

/* Tablet Styles */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
   #loginArea {background-color:green;}

   /* Name side-by-side, Event stacked full-width below;
      (Using 1% padding on both left and right, to keep things balanced)
   */
   #searchForm input {
      width: 48%;
      margin: .25em 1%;
   }
   #searchForm input#my_object {
      width: 98%;
   }
}

автор: oenstrom · Accepted Answer · 2016-09-08 15:31:46

обновление #2:

ты этого хочешь?

, проверьте эту скрипку: https://jsfiddle.net/3mwn14fk/18/

я использую #loginArea вроде как фантик. Выровняйте по вертикали так же, как раньше. width: 100%;. Вместо горизонтального выравнивания с transform Я использую text-align: center;
на text-align: center; для работы #searchForm должен быть inline-block. На #searchForm вы можете использовать text-align: left; если вы не хотите, чтобы все в этой divв центр.
перемещен стиль, как background: #000; и некоторые другие #searchForm.
удалены searchFieldкласс, больше не нужен.

небольшое обновление:

мой первоначальный ответ - это то, что я считаю лучшим способом (возможно, некоторые небольшие изменения должны быть сделаны), чтобы стиль его. Но если вы действительно хотите сделать это так, как вы это сделали, это уже работает. Просто добавьте ширину 80% (или что-то, что соответствует вашим потребностям) в #loginArea в ваши игры.

Google CSS сбросить и прочитать об этом.

вы должны прочитать на медиа-запросов: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

используйте медиа-запросы для редактирования стиля для разных размеров экрана / устройств.

вот как я бы сделал код

использование HTML-кода с небольшими изменениями:

<div id="loginArea">
    <div id="searchForm">
        Search For Results<br> 
        <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
            <input name="utf8" type="hidden" value="✓">
            <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
            <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
            <input type="text" name="my_object" id="my_object" placeholder="Event" class="searchField2 btcf">
            <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
        </form>
    </div>
</div>

удалить атрибут size из поля события.
изменил класс в поле события на .searchField2.
добавлен еще один класс в поле события с именем .btcf (очистить класс float).

и вот CSS:

#loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    box-sizing: border-box;
    color: #ffffff;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
.btcf:after {
    content: "";
    display: table;
    clear: both;
}
.searchField, .searchField2 {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 25%;
}
.searchField2 {
    width: 50%;
}

код для #loginArea тот же.
.searchField и .searchField2 идентичны, за исключением ширины.
добавил класс btcf:after который является четким поплавком для плавающих полей.

на border-box требуется на полях, поскольку стили браузеров по умолчанию добавляют границы, отступы и, возможно, еще кое-что.

и вот скрипка:https://jsfiddle.net/3mwn14fk/16/

автор: Pradeep Jha · Accepted Answer · 2016-09-09 04:52:26

#loginArea {
  white-space: nowrap;
  border-radius: 25px;
  font-family: 'russo_oneregular';
  font-size: 20px;
  padding: 20px;
  background-color: #000000;
  color: #ffffff;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
#search-form {
    margin: 0px;
    padding: 0px;
}
.search_button,
.searchField {
    display: inline;
}

<div id="loginArea">


	<div id="searchForm">
	Search For Results<br> 
	<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
		<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" size="10">
		<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" size="10">
		<input type="text" name="my_object" id="my_object" placeholder="Event" size="30" class="searchField">
		<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>	</div>

</div>

автор: shariqkhan · Accepted Answer · 2016-08-30 20:20:34

вы также должны указать ширину. Внесите изменения в класс "searchField":

.searchField {
    display: inline-block;
    width:33%;
    box-sizing:border-box;
    float:left;
}

вот JSfiddle

автор: monikapatel · Accepted Answer · 2016-08-30 23:38:05

используйте таблицу и таблицу-ячейку вместо inline-block

  #loginArea {
    border-radius: 25px;
    font-family: 'russo_oneregular';
    font-size: 20px;
    padding: 20px;
    background-color: #000000;
    color: #ffffff;
    display: table;
    position: absolute;
    top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
  }
 .searchField {
     display: table-cell;
     float:left;
     margin :0px 2px 0px; 
 }

он работает, посмотрите http://jsfiddle.net/3mwn14fk/4/

автор: Navnit · Accepted Answer · 2016-08-31 19:00:12

Если вы хотите сохранить одно поле ввода больше, а два других имеют одинаковую ширину, измените класс поля ввода, для которого вы хотите добавить ширину в "searchField1".

и добавьте следующие стили

#loginArea {
border-radius: 25px;
font-family: 'russo_oneregular';
font-size: 20px;
padding: 20px;
background-color: #000000;
color: #ffffff;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}

.searchField {
display: inline-block;
width: calc(50% - 100px);
box-sizing:border-box;
float:left;
}

.searchField1 {
display: inline-block;
width: 200px;
box-sizing:border-box;
float:left;
}

Если вы хотите задать ширину для всех полей ввода, это будет работать, но не забудьте добавить
тег непосредственно перед входом изображения, так что он помещается в следующей строке

 .searchField {
 display: inline-block;
 width: 100px; // add your width here
 box-sizing:border-box;
 float:left;
 }

 .search_button{
 clear:both;
 }

надеюсь, это поможет,

автор: Angela Amarapala · Accepted Answer · 2016-09-02 06:13:26

вы должны вставить тег div внутри формы так, что все три текстовых поля должны быть заключены внутри div tag. Теперь установите стиль этого div в:

    display:inline-flex;

убедитесь, что этот стиль переопределяет значение по умолчанию дисплей:блок вашего недавно добавленного div tag. Ваш код должен выглядеть так:

    <div id="loginArea">
        <div id="searchForm">Search For Results<br> 
            <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
                <input name="utf8" type="hidden" value="✓">
                <div style="display:inline-flex">
                    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
                    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
                    <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
                </div>
                <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
            </form>
        </div>
    </div>

Если вы также хотите разместить значок поиска в той же строке, то вы не нужно вставлять новый div тег. Вместо этого задайте для стиля формы значение:

     display:inline-flex;

тогда все будет выровнено в одной строке. Надеюсь, это сработает.

автор: Chirag Dave · Accepted Answer · 2016-09-06 09:20:01

<div class="main-container">
<div id="searchForm">
   Search For Results<br> 
  <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get">
    <input name="utf8" type="hidden" value="✓">
    <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
    <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
    <input type="text" name="my_object" id="my_object" placeholder="Event" size="50" class="searchField">
    <input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
  </form> 
</div>
</div>

теперь вы можете написать Css как,

.main-container {display:block; text-align:center; }
#searchForm { display:inline-block; }
#searchForm form input { float:left; margin-right:5px; width:100px;}