键值列表html

Question

我希望文本（参见PIC2）每个文本都在同一个地方开始，可以这么说，提供了一个标签。在Word中，它只是一个标签。但是它在HTML或CSS中如何工作？有人可以帮助我并告诉我如何从PIC2制作PIC1吗？

PIC1：

PIC2：

代码：

<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>

Answer 1

＆＃13;

NonEmpty a

＆＃13;

.poperty-container{
clear:both;
}
.key-div
{
  width:50%;
  float:left;
}
.value-div
{
width:50%;
float:left;
}

＆＃13;

Answer 2

不是使用换行符，而是将它们分成两个部分，中间有一个边距。

<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>

Answer 3

使用列。该网站应该有所帮助： https://www.w3schools.com/css/css3_multiple_columns.asp

＆＃13;

<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>

＆＃13;

Answer 4

您应该查看ASCII代码。标签的一个是	

在ascii-code.com

找到整个列表

Answer 5

您可以将ASCII字符代码放入HTML格式的标签中（&#后跟9;）。但请注意，HTML段落不会将其显示为标签。如果您真的想以tab方式执行此操作，则可以使用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>

然后退后一步，我建议使用表格（基本）或divs（略微更高级）。简单的表格，例如：

<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>

或者在这里阅读div https://www.w3schools.com/tags/tag_div.asp。

Answer 6

键值列表html

将每个文本部分添加到其自己的div中会使内容缩小到文本大小我还添加了一个边距，因此它总是间隔开来。

＆＃13;

.inline-div {
  display: inline-block;
}

.extra-margin {
  margin-left: 2em;
}

＆＃13;

<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>

＆＃13;

Answer 7

您可以结合使用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>

（尚不完全支持tab-size，但是滞后于此的浏览器应使用其默认的tab-size来使其正常显示）

HTML insert＆＃34; tab＆＃34;

7 个答案:

键值列表html