Как установить ширину поля ввода равномерно, когда полосы ввода расположены горизонтально? - PullRequest
Новая
       12

Как установить ширину поля ввода равномерно, когда полосы ввода расположены горизонтально?

1 голос
/ 29 апреля 2019

Добрый день,

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

Я использовал width:40% для полей слева, и он сделал свою работу.Поля стали больше и покрывают ту часть, которая мне нужна.Однако, если я увеличу ширину «правых», они просто будут сдвинуты влево, но общий размер стержня останется прежним.

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

Часть кода HTML: 

<div class="content">
        <div class="signInContent">
            <h1> Sign In </h1>
            <p> Already have an account? </p>
            <hr>

            <label for="email"><b>Email <br></b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
        <div class="registerContent">
            <h1> Register </h1>
            <p>Please fill in the form to create an account.</p>
            <hr>

            <label for="email"><b>Email</b><br></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
    </div>

Часть кода CSS (сначала левая сторона, затем правая сторона) 

.content input[type=text], input[type=password] {
  width: 40%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  text-align: left;
  border: 3px solid #4CAF50;
  background-color: #333;
  color: #f2f2f2;
}

.registerContent input[type=text]:focus, input[type=password]:focus {
  width: 41%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.signInContent {
  float: right;
  width: 50%;
}

.signInContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

В основном, выравнивание правильное.Ширина «левых» полей имеет правильный размер (поле на самом деле составляет 40%), однако правое поле остается на уровне около 20% и просто сдвигается влево (с пробелом справа).

Единственная идея, которая у меня есть, которая «может» решить проблему, - это создание таблиц с HTML, но я не уверен, сработает ли это или нет, и до тех пор, пока я не предприму такой процесс, я подумал, что задам этот вопрос здесь.Я думаю, что должно быть какое-то более простое решение.Я постоянно вижу сайты с таким контентом.

Кроме того, это мой первый пост о stackoverflow, поэтому, если я что-то сделал неправильно, сообщите мне, чтобы я мог исправить ошибки.

Чтобы объяснить лучше, ниже, как выглядит страница.Я хочу, чтобы правые "поля" были того же размера, что и левые

image

Ответы [ 2 ]

1 голос
/ 29 апреля 2019

Лучше всего выбрать размер и расположение контейнеров div, а затем сделать входные данные 100% ширины их контейнеров.Хотя я заметил, что вы фокусируете некоторые из входных данных шире.В чем причина?

Вот пример использования поплавков (расширение вашего вопроса):

(использование простых процентов здесь не будет работать, потому что заполнениеДОБАВЛЕНО к ширине, например, 40% + 20px + 20px + 60% + 20px + 20px = 100% и 80px) calc позволяет CSS сделать математику для этого равной 100%

Также убедитесь, что "очистите ваши поплавки, чтобы они не связывались с другим содержимым страницы.Вот хороший способ сделать это. 

.leftSide, .rightSide {
	padding: 20px;
}
.leftSide {
	float: left;
	width: calc(60% - 40px);
	background: #dadada;
}
.rightSide {
	float: right;
	width: calc(40% - 40px);
	background: #eee;
}

input {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}
<div class="container">
	<div class="leftSide">
		<input type="text">
		<input type="text">
		<input type="text">
	</div>
	<div class="rightSide">
		<input type="text">
		<input type="text">
	</div>
</div>

И лучшее решение с использованием CSS flexbox

flex-box "лучше", чем использование float, так как его болееЭластичность при использовании разных размеров делает столбцы одинаковой высоты, и float часто может «кровоточить» за пределами своего контейнера, чтобы воздействовать на другие объекты на странице, если вы не clear поплавки.

.container {
	display:flex;
	justify-content: space-between;
}
.leftSide, .rightSide {
	padding: 20px;
}
.leftSide {
	flex-basis: calc(60% - 40px);
	background: #dadada;
}
.rightSide {
	flex-basis: calc(40% - 40px);
	background: #eee;
}

input {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}
<div class="container">
	<div class="leftSide">
		<input type="text">
		<input type="text">
		<input type="text">
	</div>
	<div class="rightSide">
		<input type="text">
		<input type="text">
	</div>
</div>
0 голосов
/ 29 апреля 2019

Первая проблема заключается в том, что div.signInContent - это только половина ширины div.content, а div.registerContent - полная ширина div.content. Это важно, потому что процентные значения (например, width: 40%) относятся к одному и тому же значению (т.е. ширине) родительского элемента.

Плавающий оба div'а исправляет эту проблему: 

.content div {
  float: right;
  width: 50%;
}

Затем вы видите, что оба div показывают исходную проблему. Это может показаться шагом назад, но теперь мы можем относиться к обоим div одинаково. 40% из 100 - это то же самое, что и 80% из 50; Итак, давайте использовать 80% вместо 40%: 

.content input[type=text], input[type=password] {
  width: 80%;
  ...
}

А вот и полная рабочая демонстрация 

.content input[type=text], input[type=password] {
  width: 80%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  text-align: left;
  border: 3px solid #4CAF50;
  background-color: #333;
  color: #f2f2f2;
}

.registerContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
.content div {
  float: right;
  width: 50%;
}
.signInContent input[type=text]:focus, input[type=password]:focus {
  width: 55%;
  background-color: #ddd;
  color: black;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
<div class="content">
        <div class="signInContent">
            <h1> Sign In </h1>
            <p> Already have an account? </p>
            <hr>

            <label for="email"><b>Email <br></b></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
        <div class="registerContent">
            <h1> Register </h1>
            <p>Please fill in the form to create an account.</p>
            <hr>

            <label for="email"><b>Email</b><br></label>
            <input type="text" placeholder="Enter Email" name="email" required>
        </div>
    </div>
...