it-swarm.com.ru

Как создать вкладку в HTML

У меня такая ситуация

<Тело>
Тест <br />
тест <br />
test1 <br />
</ Тело>

Мне нужно добавить вкладку после 2-го теста и 3-го теста

так что это выглядит примерно так.

Тестовое задание
тестовое задание
Test1

Существует ли специальная сущность HTML или специальный символ для TAB. например. Неразрывный пробел == & nbsp;

спасибо

9
Roland

Боги, столы?

Выглядит как очевидный сценарий использования для списков с переменным полем и типом стиля списка: нет; выдержанный по вкусу.

8
annakata

Самый простой способ, которым я могу придумать, - это поместить текст во вложенные элементы 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, если хотите.

22
geowa4

Если вы действительно хотите использовать табуляции (== символы табулятора), вам нужно воспользоваться следующим решением, которое я не рекомендую:

<pre>
test
&#x09;test
&#x09;&#x09;test
</pre>

или замените <pre/> на <div style="white-space: pre" /> для достижения того же эффекта, что и с элементом pre. Вы даже можете ввести буквенный символ табуляции вместо экранированного &#x09;.

Я не рекомендую его для большинства случаев, потому что он не совсем семантический, то есть из просмотра исходного кода HTML программа не может получить какую-либо полезную информацию (например, "это заголовок" или тому подобное). Вам лучше использовать один из примеров margin-left из других ответов. Однако, если вы хотите отобразить некоторые вещи, такие как исходный код или что-то подобное, вышеприведенное решение сделает это.

Ура,

10
Boldewyn

До сих пор было множество хороших и плохих ответов, но, кажется, никто не обращал внимания на то, как вы можете выбирать между решениями.

Первый вопрос, который нужно задать: "Какова взаимосвязь между отображаемыми данными?". Как только на это ответят, используемая вами структура HTML должна стать очевидной.

Пожалуйста, обновите вопрос, объяснив больше о структуре контента, который вам нужно отображать, и вы должны найти, что получите лучшие ответы. На данный момент все, от использования <pre> до таблиц, может быть лучшим решением.

5
edeverett

Смотрите Создание 'Tab' в HTML от Neha Sinha:

Выровненный

Вы можете поместить символы табуляции в свой HTML-код напрямую, если вы используете так называемый "предварительно отформатированный" текст. В HTML окружите текст, который вы хотите "предварительно отформатировать", в паре "<pre>" и "</pre>" начального и конечного тегов.

Таблицы

Вы можете использовать HTML-таблицу, чтобы все, что вы поместили в набор строк (<tr>) и столбцов (<td>), отображалось одинаково. Вы можете очень хорошо скрыть границы таблицы, чтобы показать только текст.

Использование тега <dd>

Тег <dd> предназначен для форматирования определений. Но это также создаст разрыв строки и сделает вкладку!

&nbsp;, неразрывный пробел

Один фрагмент HTML-кода, который я использовал в примере таблицы, - это "неразрывный пробел", закодированный как в HTML. Это просто дает вам немного места. В сочетании с переводом строки, <br>, вы можете создавать эффекты, похожие на табуляции.

Пример

Test<br/>
<pre>   </pre>test<br/>
<pre>       </pre>test1<br/>

это должно отображаться как:

Test
    test
        test1
3
Eugene Yokota

Я думаю, что проще всего сделать, использовать HTML-теги UL/LI, а затем манипулировать (и удалять, если необходимо) символами перед списком с помощью CSS.

Тогда вы получите что-то вроде:

  • Тестовое задание
  • Test2
    • Тест 3

Подробнее + рабочий пример вы можете попробовать.

3
Perica Zivkovic

Если вам нужно отобразить вкладки (символы табуляции), используйте элемент PRE (или любой элемент с примененным к нему CSS white-space: pre;).

<!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
Mathias Bynens

Я понимаю, что это старый пост, однако кто-то может захотеть использовать следующий список для создания списка с отступом (используя список описания)


На мой взгляд, это гораздо более чистый способ, чем многие другие ответы здесь, и может быть лучшим способом:

  • Он не использует кучу пробельных символов (что дает мало контроля с точки зрения форматирования для стилей)
  • Он не использует тег <pre>, который следует использовать только для форматирования (на мой взгляд, это должно быть в крайнем случае или использование в особом случае в HTML); Тег <pre> также зависит от пробелов и не зависит от CSS при использовании так, как он предназначен

    w3schools говорит использовать элемент <pre> при отображении текста с необычным форматированием или какого-либо компьютерного кода .

  • описательные списки обеспечивают больший контроль с точки зрения форматирования и иерархии
  • Ответ @ geowa4, я бы сказал, еще один отличный способ сделать это. <div>s позволяет контролировать стиль и, в зависимости от цели использования, его ответ может быть лучшим способом.


<dl>
  <dt>Test</dt>
  <dd>
    <dl>
      <dt>test</dt>
      <dd>test1</dd>
    </dl>
  </dd>
</dl>
0
ctwheels