Выравнивание текста

Olegs2 · May 16, 2012

Есть код:

Test: ABCD123: <a href="test">123</a><br>
ASDF123: <a href="test">123</a>

Пытаюсь добиться от него такого результата:


Test: ABCD123: 132
      ASDF123: 123

Можно конечно делать так, но мне это кажется костылем.

Test: <span style="padding:0px 10px;">ABCD123: <a href="test">123</a></span><br>
<span style="padding:0px 39px;">ASDF123: <a href="test">123</a></span>

Подскажите, пожалуйста, верное решение.

Int · May 16, 2012

<div style="float:left; width:38px;">Test:</div>
<div style="margin-left:39px;">ABDC123:<a>132</a></div>
<div style="margin-left:39px;">ASDF123:<a>123</a></div>

Или ссылки тоже надо отодвинуть? Ну тут можно сделать

.div a {padding-left:10px;}

Как-то так. И класс не забыть задать

Olegs2 · May 16, 2012

Спасибо за совет, но он не совсем подходит. Дело в том что при смене размера текста, либо при изменение слова "Test:" придется заново задавать координаты.

Int · May 16, 2012

Тогда таблицей )

Olegs2 · May 16, 2012

Пробовал таблицей. Но видимо из-за корявости рук не получилось.

Int · May 16, 2012


<table>
<tr>
<td rowspan="2" style="vertical-align:top;">Test:</td> <td>ASDF123:</td><td>123</td>
</tr>
<tr>
<td>ABCD132:</td><td>132</td>
</tr>
</table>

Yazon_Nile · May 17, 2012

<span>Test</span>
<dl>
        <dt>ABCD123:</dt>
        <dd>132</dd>
        <dt>ASDF123:</dt>
        <dd>123</dd>
</dl>

span{
        float:left;
        margin:0 5px 0 0;
}
dl{
        margin:0;
        overflow:hidden;
}
dt{
        float:left;
        margin:0 5px 0 0;
}
dd{overflow:hidden;}

Edited May 17, 2012 by Yazon_Nile

Kiruak_Black · May 17, 2012

Добрый день!

Помогите пожалуйста мне с похожей проблемой

Есть список элементов формы:

Ваше имя: <текстовое поле ввода>

Ваша фамилия: <текстовое поле ввода>

.......

Так вот проблема как сделать чтобы все подписи к элементам формы были слева а поля ввода (одинаковой ширины) с правого края?

MeTaN · May 18, 2012

On 5/17/2012 at 7:43 PM, Kiruak_Black said:
Добрый день!
Помогите пожалуйста мне с похожей проблемой
Есть список элементов формы:
Ваше имя: <текстовое поле ввода>
Ваша фамилия: <текстовое поле ввода>
.......
Так вот проблема как сделать чтобы все подписи к элементам формы были слева а поля ввода (одинаковой ширины) с правого края?

<html>
	<head>
	<style type="text/css">
	form span {
		display: block;
		width: 120px;
		text-align: right;
		clear: both;
		float: left;
		padding-right: 5px;
	}
	input {
		display: block;
		float: left;
	}
	</style>
	</head>
	<body>
		<form action="URL">
			<span>Логин:</span><input name="login" type="text" size="40">
			<span>Пароль:</span><input name="pass" type="text" size="40">
			<span>Город:</span><input name="town" type="text" size="40">
		</form>	
	</body>
</html>

Результат

Sign In

Выравнивание текста

Question

Olegs2

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

Olegs2

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

Olegs2

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Kiruak_Black

Link to comment

Share on other sites

MeTaN

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information