Инлайновый элемент переносится на другую строку без отступа

sublife · November 24, 2009

Добрый день, образовалась такая проблема.

Есть заголовок с фоном (ссылка), у ссылки прописан padding:5px; и display:inline;

Но про переносе строки заголовка padding на другой строке слева и справа на предыдущей строке не отображается.

Наглядно:

Подскажите пожалуйста, как справиться с проблемой.

Great Rash · November 24, 2009

И правильно делает, что не проставляется паддинг. Зачем вы назначаете инлайн-элементу по умолчанию (ссылке) display: inline;?

Может вам поможет display: inline-block;? А вообще хотелось бы посмотреть для чего вам все это нужно.

sublife · November 24, 2009

И правильно делает, что не проставляется паддинг. Зачем вы назначаете инлайн-элементу по умолчанию (ссылке) display: inline;?
Может вам поможет display: inline-block;? А вообще хотелось бы посмотреть для чего вам все это нужно.

При display: inline-block будет так, как вы понимаете:

поэтому и поставили display: inline;

Надо не мне, так по макету...

rash · November 24, 2009

Поставьте толстый левый бордер цвета фона, и не надо паддингов.

sublife · November 24, 2009

Поставьте толстый левый бордер цвета фона, и не надо паддингов.

эффект тот же, что и при паддингах

psywalker · November 24, 2009

эффект тот же, что и при паддингах

пропиши паддинг самому элементу, в котором лежит ссылка

Great Rash · November 24, 2009

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

sublife · November 24, 2009

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

на 2й строке отступ слева присутствовать должен, как и на первой

psywalker · November 24, 2009

на 2й строке отступ слева присутствовать должен, как и на первой

я тебе написал, поставь отступ родителю

shvv · November 24, 2009

я тебе написал, поставь отступ родителю

Тогда отступы будут без фона.

sublife · November 24, 2009

пропиши паддинг самому элементу, в котором лежит ссылка

так тоже извращались) не помогло(

я тебе написал, поставь отступ родителю

родитель div, которому я не поставлю дисплей: инлайн, тогда вообще каша получается

Тогда отступы будут без фона.

ставлю фон родителю div'у, но нужно, чтобы фон был не прямоугольный, а "обтекал" строку, как на рисунке в сабже

mishka · November 24, 2009

Так бордер родителю левый зеленый. И паддинг с сылки левый убрать

psywalker · November 24, 2009

Да вообще ТС уже переборщил, мало того, что задаче для детей, так ему ещё и вариантов уже понадавали море, пора бы уже воспользоваться друг

shvv · November 24, 2009

Так бордер родителю левый зеленый. И паддинг с сылки левый убрать

По-моему, топик зацикливается:

rash Дата Сегодня, 13:00
Поставьте толстый левый бордер цвета фона, и не надо паддингов.

mishka · November 24, 2009

А вообще советую отказатся от идеи такого дизайна. Красоты никакой, изврата куча.

rash · November 24, 2009

Вообще поведение не свойственное строчному элементу требуется, так что если бордер не сработал, то без изврата, боюсь, не выйдет.

Great Rash · November 24, 2009

бордер сработал

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma;
		}

		body {
			margin: 10px;
		}

		div {
			width: 15%;
			border: darkgreen 1px solid;
		}

		a {
			background: red;
		}

		span {
			display: block;
			border-left: red 10px solid;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<div>
		<span><a href="#">text text text text text text text text</a></span>
	</div>

</body>
</html>

Edited November 24, 2009 by Great Rash

rash · November 24, 2009

Ой-ой-оюшки, span {display: block;}

Как я понял, фон нужен только непосредственно под текстом.

sublife · November 24, 2009

Да вообще ТС уже переборщил, мало того, что задаче для детей, так ему ещё и вариантов уже понадавали море, пора бы уже воспользоваться друг

ну не так уж и для детей

Вариант с бордером подходит, не совсем правда (в верхней строке справа такой бордер не поставишь...)), но им воспользуюсь. Всем спасибо!

Sign In

Инлайновый элемент переносится на другую строку без отступа

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information