Как я создаю вкладку, делающую отступ в HTML
Я не помню, возможно ли в Eclipse перенос слов / строк / методов / классов
В Intellij Idea вы используете Ctrl + W
7 ответов
Боги, таблицы?
Похоже на очевидный вариант использования для списков с переменным полем и типом стиля списка: none; приправленный по вкусу.
Самый простой способ, который я могу придумать, - это поместить текст во вложенные блоки 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*/
}
С ними вы получите красивое дерево, независимо от того, на сколько уровней вы хотите пройти.
РЕДАКТИРОВАТЬ: Вы также можете использовать padding-left , если хотите.
Если вы действительно хотите использовать вкладки (== символы табулятора), вам нужно использовать следующее решение, которое я не рекомендую:
<pre>
test
	test
		test
</pre>
или замените на , чтобы добиться того же эффекта, что и с элементом pre. Вы даже можете ввести буквальный символ табуляции вместо экранированного & # x09; .
Я не рекомендую его для большинства случаев использования, потому что он не совсем семантический, то есть при просмотре HTML исходный код программа не может вывести какую-либо полезную информацию (например, «это заголовок» и т.п.). Вам лучше использовать один из хороших margin-left примеров других ответов. Однако, если вы хотите отобразить некоторые вещи, например исходный код или что-то подобное,
До сих пор было множество хороших и плохих ответов, но, похоже, никто не рассмотрел способ выбора между решениями.
Первый вопрос, который нужно задать: «Какая связь между отображаемыми данными?» . После того как на этот вопрос будет дан ответ, структура HTML, которую вы используете, станет очевидной.
Обновите вопрос, объясняя больше о структуре контента, который вам нужно отображать, и вы обнаружите, что получите более точные ответы. На данный момент все, от использования до таблиц, может быть лучшим решением.
Я думаю, что проще всего использовать html-теги UL / LI, а затем манипулировать (и при необходимости удалять) символы перед списком с помощью CSS.
Тогда вы получите кое-что. например:
- Тест
- Тест2
- Тест 3
Дополнительная информация + рабочий пример, который вы можете попробовать.
См. Создание вкладки в HTML Неха Синха:
Предварительно отформатировано
Вы можете поместить символы табуляции в свой HTML напрямую, если вы используете то, что называется "предварительно отформатированным" текст. В HTML окружайте текст, который вы хотите "предварительно отформатировать" в пару «
» и «» начало и конец теги.Таблицы
Вы можете использовать таблицу html, чтобы все, что вы помещали в набор строк (
) и столбцы ( ) отображаются таким же образом. Вы можете очень хорошо скрыть границы таблицы, чтобы показать только текст. Использование тега
Тег
предназначен для определений форматирования. Но это также создаст разрыв строки и сделает вкладка!
& nbsp;, Неразрывное пространствоОдин бит HTML-кода, который я использовал в примере таблицы, - это «неразрывный пробел», закодированный как в HTML. Это просто дает вам немного места. В сочетании с разрывом строки
вы можете создать некоторые эффекты табуляции.
Пример
Test<br/> <pre> </pre>test<br/> <pre> </pre>test1<br/>это должно отображаться как:
Test test test13ответ дан 4 December 2019 в 05:59поделиться
Если вам нужно отображать табуляцию (символы табулятора), используйте элемент
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
& # x09;вместо фактического символа табуляции.2ответ дан 4 December 2019 в 05:59поделиться
Другие вопросы по тегам:Похожие вопросы:
