5

抱歉，这可能是一个厚问题，但是如何让 HTML 显示类似于在 Word 中使用选项卡按钮？我想这样显示：

header text      header text      Header text  
text in column   text in column   text in column

如果我使用空格键，它只会忽略空格。实际上，我将把剃刀变量放在列中，但这是我试图创建的总体思路。

毫无疑问，有一个 div 标签或类似的标签代表“标签”功能，或者将文本分列 - 我只是不知道！

4

7 回答 7

9

您需要使用 CSS + HTML，而不是基于字符的标记。

<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>

CSS：

.column {
     width:300px;
     float:left
}
于 2012-10-16T20:34:51.337 回答
3

所有主流浏览器现在都支持 CSS3，您可以在其中使用 column-count，如下所示：

<style>.columns{column-count: 3;}</style>

<div class="columns"> your text ... </div>
于 2017-10-25T20:26:16.097 回答
2

你可能会得到一个 HTML 表格：

<table>
  <tr>
   <th>header text</th>
   <th>header text</th>
   <th>header text</th>
  </tr>
  <tr>
   <td>text in column</td>
   <td>text in column</td>
   <td>text in column</td>
  </tr>
 </table>

当然还有一点点造型，你可以看看这个工具：http ://tablestyler.com

于 2012-10-16T20:34:38.527 回答
2

您可以为此使用 WebGrid 帮助器（如果您所追求的是 Grid（带有列和行））：

WebGrid 类文档

<div id="grid">
    @grid.GetHtml(
            headerStyle: "HeaderStyle",
                columns: grid.Columns(
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column"),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"]),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"]),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"])
            )
        )
</div>
于 2012-10-16T21:11:35.230 回答
0

我能想到的几件事，

1）使用“ ” （删除 & 之后的空格）与您在 HTML 中的静态文本，这将被转换为空格（不太推荐，除非您只谈论几行静态内容）

2）使用表格并使表格边框不可见

标题文本 标题文本 标题文本
于 2012-10-16T20:43:06.643 回答
0

如果您的文本类似于表格，那么您<table>将在另一个答案中描述。但是，如果您的文本与表格不同，您可以尝试使用该<pre>元素

<pre>是预格式化文本的缩写，它保留空白并使用等宽字体。这样，您可以轻松地使文本对齐。

例子：

<pre>
header text      header text      Header text  
text in column   text in column   text in column  
</pre>
于 2015-04-27T11:31:42.367 回答
0

这个问题是在 google 中搜索 HTML 列时出现的第一个问题。接受的答案使用表格进行布局，不应该这样做。

现在您可以使用 CSS 属性columnsor display: flex，它比所有其他答案都简单得多，并且被所有浏览器广泛支持。

对于这个特定的问题display: flex效果更好，但对于不需要标题的长文本columns就足够了。

section {
  display: flex;
}
article {
  padding: 0 2em;
}
<section class="container">
  <article>
    <h2>First title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices sapien ut nulla malesuada, at vehicula ex cursus. Suspendisse ac leo aliquet, gravida lectus eleifend, facilisis ante. In pretium tempus orci, id pretium ipsum. Nulla bibendum odio ut lobortis pharetra. Integer nec lectus pellentesque purus eleifend venenatis. In et sagittis ipsum, eget volutpat enim. Vivamus vel neque sit amet nisl vulputate scelerisque id in diam. Fusce pretium, est eget sodales faucibus, turpis erat sollicitudin nisl, a elementum lorem nisi quis nisi. Nullam tincidunt iaculis lectus. Morbi nec sem metus. Nulla cursus tincidunt cursus.</p>
  </article>
  <article>
    <h2>Second title</h2>
    <p>Pellentesque euismod iaculis dolor. Duis finibus arcu nec odio vulputate, vitae ullamcorper felis suscipit. Nullam neque arcu, finibus quis tincidunt eu, pretium nec est. Pellentesque sagittis malesuada mauris sed auctor. Donec neque urna, pharetra in libero in, posuere finibus massa. Nam eu maximus turpis. Sed faucibus, orci sit amet tristique facilisis, enim risus ornare diam, non interdum dolor metus nec sem. Phasellus non sodales justo. Pellentesque congue leo ut diam semper aliquet condimentum id neque. Cras nec eros quis nulla accumsan egestas ac quis purus. Suspendisse leo tellus, dapibus nec facilisis vitae, convallis sit amet ligula.</p>
  </article>
  <article>
    <h2>Third title</h2>
    <p>Morbi non semper dui. Suspendisse posuere dapibus ipsum, vitae gravida nisl pretium aliquet. Vivamus aliquet risus in libero luctus molestie. Proin imperdiet magna nunc, ac fermentum tellus egestas eu. Integer ac erat nisl. Aliquam erat volutpat. Etiam nec lorem ornare nisl sagittis pulvinar. Ut lobortis ullamcorper odio eu porttitor. Nunc luctus, sem quis dictum rutrum, sapien felis pharetra eros, id viverra risus turpis nec arcu. Donec rutrum, mauris ac mollis facilisis, felis nisi vehicula velit, vestibulum placerat velit augue ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse tempor rhoncus facilisis. Morbi pretium, mi quis feugiat rutrum, leo turpis malesuada nisl, at tristique eros leo vitae quam.</p>
  </article>
</section>

于 2019-09-25T09:55:40.970 回答