Question

很抱歉，这可能是一个很大的问题，但是如何让HTML显示类似于使用Word中的标签按钮？我想这样显示：

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

如果我使用空格键，它只会忽略空格。实际上，我会将razor变量放在列中，但这是我想要创建的一般概念。

毫无疑问，有一个div标签或类似代表'tab'功能，或者将文本列为列表 - 我只是不知道它！

Answer 1

您需要使用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
}

Answer 2

现在所有主流浏览器都支持CSS3，您可以按如下方式使用列计数：

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

<div class="columns"> your text ... </div>

Answer 3

您最终可能会得到一个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

Answer 4

您可以使用WebGrid帮助程序（如果您使用的是Grid（包含列和行））：

WebGrid Class Documentation

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

Answer 5

我能想到的一些事情，

1）使用“＆amp; nbsp;” （在＆amp;之后删除空格）用HTML中的静态文本，这将被转换为SPACE（除非你只讨论几行静态内容，否则不推荐使用）

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

标题文本标题文本标题文本

Answer 6

如果您的文字类似于表格，那么您<table>如另一个答案中所述。但是，如果您的文本与表格不相似，则可以尝试<pre>元素

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

示例：

<pre>
header text      header text      Header text  
text in column   text in column   text in column  
</pre>

Answer 7

此问题是在HTML中搜索列时在Google中出现的第一个问题。可接受的答案将表格用于布局目的，不应这样做。

如今，您可以使用CSS属性columns或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>

如何使文本显示在HTML中的列中

7 个答案: