у меня ситуация следующая
‹body›
Test‹br /›
test‹br /›
test1‹br /›
‹/body›
Мне нужно добавить вкладку после 2-го теста и 3-го теста
так что это похоже на это.
Тест
тест
тест1
Есть ли специальный объект HTML или специальный символ для TAB. например. Неразрывный пробел == & NBSP ;
Благодарность
О боги, столы?
Выглядит как очевидный пример использования списков с переменным полем и типом стиля списка: нет; приправленный по вкусу.
Самый простой способ, который я могу придумать, - это поместить текст во вложенные элементы div. Затем добавьте поле слева от div. Он будет стекать вниз, давая вам отступ.
<div id='testing'>
Test1
<div>
Test2
<div>
Test3
</div>
</div>
</div>
С CSS:
#testing div {
margin-left: 10px;/*or whatever indentation size you want*/
}
С ними вы получите красивое дерево, независимо от того, на сколько уровней вы хотите пройти.
EDIT: вы также можете использовать padding-left, если хотите.
ul повсюду. @Mathias Bynens Мой ответ лучше подходит для решения его проблемы, чем использование символов табуляции.
- person geowa4; 01.07.2009
Если вы действительно хотите использовать табуляции (== символы табуляции), вы должны использовать следующее решение, которое я не рекомендую:
<pre>
test
	test
		test
</pre>
или замените <pre/> на <div style="white-space: pre" />, чтобы добиться того же эффекта, что и с элементом pre. Вы даже можете ввести буквальный символ табуляции вместо экранированного 	.
Я не рекомендую его для большинства применений, потому что он не совсем семантический, то есть из просмотра исходного кода HTML программа не может вывести какую-либо полезную информацию (например, «это заголовок» или что-то в этом роде). Вам лучше использовать один из хороших margin-left примеров других ответов. Однако, если вы хотите отобразить некоторые вещи, такие как исходный код или что-то подобное, приведенное выше решение сделает это.
Ваше здоровье,
До сих пор было множество хороших и плохих ответов, но, похоже, никто не обращался к тому, как вы можете выбирать между решениями.
Первый вопрос, который следует задать: "Какова взаимосвязь между отображаемыми данными?". Как только на этот вопрос будет дан ответ, используемая вами структура HTML должна быть очевидна.
Пожалуйста, обновите вопрос, объясняя больше о структуре контента, который вам нужно отобразить, и вы обнаружите, что вы получаете лучшие ответы. На данный момент все, от использования <pre> до таблиц, может быть лучшим решением.
См. Создание вкладки в HTML от Неха Синха:
предварительно отформатировано
Вы можете поместить символы табуляции непосредственно в свой HTML, если используете так называемый «предварительно отформатированный» текст. В HTML окружите текст, который вы хотите «предварительно отформатировать», парой начального и конечного тегов «
<pre>» и «</pre>».Столы
Вы можете использовать html-таблицу, чтобы все, что вы помещаете в набор строк (
<tr>) и столбцов (<td>), отображалось одинаково. Вы можете очень хорошо скрыть границы таблицы, чтобы показать только текст.Использование тега
<dd>Тег
<dd>предназначен для определения форматирования. Но это также создаст разрыв строки и сделает вкладку!
, Неразрывное пространствоОдин фрагмент HTML-кода, который я использовал в примере с таблицей, — это «неразрывный пробел», закодированный как в HTML. Это просто дает вам некоторое пространство. В сочетании с разрывом строки,
<br>, вы можете создать некоторые эффекты табуляции.
Test<br/>
<pre> </pre>test<br/>
<pre> </pre>test1<br/>
это должно отображаться как:
Test
test
test1
Я думаю, что проще всего использовать html-теги UL/LI, а затем манипулировать (и удалять, если необходимо) символы перед списком с помощью CSS.
Тогда вы получите что-то вроде:
Дополнительная информация + рабочий пример, который вы можете попробовать.
Если вам нужно отобразить вкладки (символы табуляции), используйте элемент PRE (или любой элемент с примененным к нему white-space: pre; CSS).
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
pre { white-space: pre; }
</style>
</head>
<body>
<p>This is a normal paragraph, blah blah blah.</p>
<pre>This is preformatted text contained within a <code>PRE</code> element. Oh, and here are some tab characters, each of which are displayed between two arrows: ← → ← → ← → ← →</pre>
</body>
</html>
Вы также можете использовать объект HTML 	 вместо фактического символа табуляции.
white-space: nowrap;
- person l0b0; 01.07.2009
Я понимаю, что это старое сообщение, однако кто-то может захотеть использовать следующий список для создания списка с отступом (используя тег список описаний)
На мой взгляд, это гораздо более чистый способ, чем многие другие ответы здесь, и может быть лучшим способом:
<pre>, который следует использовать только для форматирования (на мой взгляд, это должно быть крайним средством или особым случаем использования в HTML); Тег <pre> также зависит от пробелов и не зависит от CSS, если используется по назначению #P3#
<div> позволяет контролировать стиль, и, в зависимости от использования/цели, его ответ может быть лучшим способом.<dl>
<dt>Test</dt>
<dd>
<dl>
<dt>test</dt>
<dd>test1</dd>
</dl>
</dd>
</dl>Я не сторонник использования CSS для имитации символа табуляции.
Для отступов да, во что бы то ни стало используйте CSS, но не для символов табуляции.
Для одной вкладки я бы заменил на (4 пробела).
Это похоже на то, что использовалось для форматирования вашего вопроса для отображения.
Дополнительным преимуществом этого является (если кто-то скопирует ваш текст)
при вставке в Word или Блокнот интервалы сохранятся.
Пример:
Test<br />
test<br />
test1Примечание. Если ваш текст находится в теге <pre>, то ответ @Boldewyn будет лучшим вариантом.
Имейте в виду, что текст в теге <pre> может отображаться иначе, чем ожидалось.
