позиционирование формы

Евгений_SB · July 8, 2017

Ребят подскажите как отпозоционировать input и option что бы они были на одном уровне и одинакового размера,кучу видосов посмотрел на ютубе но там никто не объясняет толком как и почему

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="container">
			<form action="#" method="post">
				<p><label for="name">Name: <input type="text"></label></p>
				<p><label for="passvord">Passvord: <input type="text"></label></p>
				<p><label for="forza">Forza:</label>
				<select name="nav" id="" size="1">
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
				</select></p>
				<p><label for="text" class="mes">message: <input type="text"></label></p>
				
			</form>

		</div>

	</body>
</html>

body {
	padding: 0;
	margin: 0;
}

.container {
	width: 300px;
	height: 450px;
	margin: 40px auto;
	background: #f3f1f3;

	border: 10px solid;
	border-radius: 30px;
	border-color: #848484;
}

.container p {
	display: block;
	position: relative;
	text-align: center;

	color: #000;
	text-transform: uppercase;
	font: 16px tahoma;
	top: 80px;
}
.container input, option {
	width: 160px;
	height: 40px;

	color: #848484;

}

Edited July 8, 2017 by Евгений_SB

AlexZaw · July 8, 2017

.container input, .container select {
	width: 160px;
	height: 40px;

	color: #848484;

}

AlexZaw · July 8, 2017

в данном случае тот-же, но если у нас несколько select-ов на странице, то стиль будет применен ко всем, что не всегда может быть нужно, а так мы указываем на конкретный select

SnowSilver · July 8, 2017

"Ребят подскажите как отпозоционировать input и option что бы они были на одном уровне"
Вы имели ввиду наверное, чтоб подписи и поля ввода были ровными, про уровень...
Результат в скрине

<div class="container">
			<form action="#" method="post">
				<p><label for="name">Name: </label>
					<input type="text">
				</p>
				<p>
					<label for="passvord">Passvord: </label>
						<input type="text">
				</p>
				<p>
				<label for="forza">Forza:</label>
				<select name="nav" id="" size="1">
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
					<option value="forsa motors">forsa motors</option>
				</select></p>
				<p>
				<label for="text" class="mes">message: </label>
				<input type="text">
				</p>
				
			</form>

		</div>

.container input, .container select {
	width: 160px;
	height: 40px;

	color: #848484;

}

.container label {
	display: inline-block;
	width: 90px;
	text-align: right;
}

ErUnDAK · July 8, 2017

28 минут назад, AlexZaw сказал:


.container input, .container select {
	width: 160px;
	height: 40px;

	color: #848484;

}

Вопрос: а разве не тот же эффект будет, если написать так?:

.container input, select {
	width: 160px;
	height: 40px;

	color: #848484;

}

Евгений_SB · July 9, 2017

Ребят все сделал как вы написали, input с option выравнялись а label почему то улетели наверх хотя у вас на последнем скрине все ровно, ничего не пойму

еще поменял значение в .container label ато не совсем ровно 90 было

причем проверил в codepen там все работает как надо,что за

Edited July 9, 2017 by Евгений_SB

Евгений_SB · July 9, 2017

Все ребят разобрался сам)) все из за моей невнимательности тег INPUT был обернут в тег LABEL и применял стили ко всему блоку

Sign In

позиционирование формы

Question

Евгений_SB

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

AlexZaw

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

SnowSilver

Link to comment

Share on other sites

ErUnDAK

Link to comment

Share on other sites

Евгений_SB

Link to comment

Share on other sites

Евгений_SB

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information