Я хотел бы, чтобы текст (см. PIC2), чтобы каждый текст начинался в том же месте, так сказать, снабжен вкладкой. В Word это просто вкладка. Но как это работает в HTML или CSS? Может кто-нибудь помочь мне и сказать, как я могу сделать PIC1 из PIC2?

Pic1 :

pic 1

Pic2 :

pic 2

Код:

<p><strong>Öffnungzeiten:</strong>
        <p>Montag Geschlossen<br/>
        Dienstag 09:00 - 18:00<br/>
        Mittwoch Geschlossen<br/>
        Donnerstag 09:00 - 18:00<br/>
        Freitag 09:00 - 18:00<br/>
        Samstag 09:00 - 13:00<br/>
        Sonntag Geschlossen</p>
0
user7597016 22 Фев 2018 в 19:17

7 ответов

Лучший ответ
.poperty-container{
clear:both;
}
.key-div
{
  width:50%;
  float:left;
}
.value-div
{
width:50%;
float:left;
}
<div class='poperty-container'>
  <div class='key-div'>
    Montag 
  </div>
  <div class='value-div'>
    Geschlossen
  </div>
</div>


<div class='poperty-container'>
  <div class='key-div'>
    Dienstag 
  </div>
  <div class='value-div'>
    09:00 - 18:00
  </div>
</div>



   
1
ahmednawazbutt 22 Фев 2018 в 16:28

Вместо того, чтобы использовать разрыв строки, разделите их на две секции с полем между ними.

<div style="display: flex">
    <div>
      <p>Montag</p>
      <p>Dienstag</p>
      <p>Mittwoch</p>
      <p>Donnerstag</p>
      <p>Freitag</p>
      <p>Samstag</p>
      <p>Sonntag</p>
    </div>
    <div style="margin-left: 2rem">
      <p>Geschlossen</p>
      <p>09:00 - 18:00</p>
      <p>Geschlossen</p>
      <p>09:00 - 18:00</p>
      <p>09:00 - 18:00</p>
      <p>09:00 - 13:00</p>
      <p>Geschlossen</p>
    </div>
</div>
1
Tim Mathis 22 Фев 2018 в 16:29

Используйте столбцы. Этот сайт должен помочь: https://www.w3schools.com/css/css3_multiple_columns.asp

<style>
  .columns {
    -webkit-column-count: 2;
    /* Chrome, Safari, Opera */
    -moz-column-count: 2;
    /* Firefox */
    column-count: 2;
    column-gap: 8px;
    column-fill: auto;
  }
  
  #column1 {
    column-span: none;
  }
  
  li {
    list-style-type: none
  }
</style>
<div class="columns">
  <div id="column1">
    <ul>
      <li>Montag </li>
      <li>Dienstag</li>
      <li>Mittwoch</li>
      <li>Donnerstag</li>
      <li>Freitag</li>
      <li>Samstag</li>
      <li>Sonntag</li>
    </ul>
  </div>
  <div id="column2">
    <ul><br/>
      <li>Geschlossen</li>
      <li>09:00 - 18:00</li>
      <li>Geschlossen</li>
      <li>09:00 - 18:00</li>
      <li>09:00 - 18:00</li>
      <li>09:00 - 13:00</li>
      <li>Geschlossen</li>
    </ul>
  </div>
</div>
1
Matthew Stevenson 22 Фев 2018 в 17:59

Значение ключа List html

Добавление каждого раздела текста в отдельный элемент div приводит к уменьшению его размера до размера текста.
Я также добавил поле, чтобы оно всегда было на расстоянии друг от друга.

.inline-div {
  display: inline-block;
}

.extra-margin {
  margin-left: 2em;
}
<div>
  <div class="inline-div">
    <p>
      <label>long text here</label><br>
      <label>text</label><br>
      <label>text</label><br>
      <label>text</label>
    </p>
  </div>
  <div class="inline-div extra-margin">
    <p>
      test
      <br> test
      <br> test
      <br> test
    </p>
  </div>
</div>
0
Persijn 22 Фев 2018 в 17:06

Вы можете достичь того, что вам нужно, с помощью комбинации pre, символа табуляции (& # 9) и установки размера табуляции на то, что вы хотите в CSS:

pre {tab-size: 8;}
<pre>
  Montag&#9 Geschlossen<br/>
  Dienstag&#9 09:00 - 18:00<br/>
  Mittwoch&#9 Geschlossen<br/>
  Donnerstag&#9 09:00 - 18:00<br/>
  Freitag&#9 09:00 - 18:00<br/>
  Samstag&#9 09:00 - 13:00<br/>
  Sonntag&#9 Geschlossen
</pre>

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

0
lukkea 29 Май 2019 в 17:40

Вы можете вставить код символа ASCII для вкладок в HTML (&#, за которым следует 9;). Однако обратите внимание, что абзацы HTML не показывают их как вкладки. Вместо этого вы можете использовать pre предварительно отформатированные блоки, если вы действительно хотите сделать это путем табуляции:

<p><strong>Öffnungzeiten:</strong>
<pre>
    Montag&#9;Geschlossen<br />
    Dienstag&#9;9:00 - 18:00<br />
    Mittwoch&#9;Geschlossen<br />
    Donnerstag&#9;09:00 - 18:00<br />
    Freitag&#9;09:00 - 18:00<br />
    Samstag&#9;09:00 - 13:00<br />
    Sonntag&#9;Geschlossen
</pre>

Однако, сделав шаг назад, я бы посоветовал использовать таблицу (базовую) или div (чуть более продвинутую). Простая таблица, например:

<p><strong>Öffnungzeiten:</strong>
<table>
    <tr>
        <td>Montag</td><td>Geschlossen</td>
    </tr>
    <tr>
        <td> Dienstag</td><td>9:00 - 18:00</td>
    </tr>
    .
    .
    .
</table>

Или читайте о divs здесь https://www.w3schools.com/tags/tag_div.asp .

0
Rab 22 Фев 2018 в 16:34