用于类似表格的“标签 - 值”的 HTML 和 CSS结盟

发布于 2024-11-09 14:33:09 字数 1347 浏览 0 评论 0原文

好吧，这很尴尬。我几乎想使用 TABLE 但我认为这是错误的。

基本上，我有一个带有 fieldset 的页面，在“编辑模式”下有一堆输入，如下所示：

<label for="txtName">Address</label>
<textarea name="Name" id="txtName">
    1 The test
    AddressTown
    UK
</textarea>

当此页面处于“只读”模式时，textarea 变成一个跨度，例如

<label>Address</label>
<span>
    1 The test<br />
    AddressTown<br />
    UK
</span>

我想以表格方式放置标签和值，以便每个 label 位于左侧，具有固定宽度，input 或 < code>span 如下所示：

---------------------------
Name       1 the test
           AddressTown
           UK
---------------------------

这在表中是理所当然的：

<table>
<tr>
    <th style="width: 150px; vertical-align: top;">
        <label>Address</label>
    </th>
    <td>
        <span>
        1 The test<br />
        AddressTown<br />
        UK
        </span>
    </td>
</table>

但是我一直在尝试使用 CSS 来实现这一点，仅在 标签上使用 float 以及两者，但无论我尝试什么，我都会遇到以下情况之一：

span 的第二行位于 label
下面span 直接从标签下方开始，
我得到了一个不错的表格布局但是我必须指定跨度的宽度，但我不想这样做。

有什么想法吗？

原文

Okay this is embarrassing. I'm almost tempted to use TABLE but I think it's wrong.

Basically, I have a page with a fieldset, that in "Edit Mode" has a bunch of inputs like so:

<label for="txtName">Address</label>
<textarea name="Name" id="txtName">
    1 The test
    AddressTown
    UK
</textarea>

When this page is in "Read Only" mode, the textarea turns into a span e.g

<label>Address</label>
<span>
    1 The test<br />
    AddressTown<br />
    UK
</span>

I want to lay the label and value out in a tabular way so that each label is on the left with a fixed width and the input or span follows it like so:

---------------------------
Name       1 the test
           AddressTown
           UK
---------------------------

This would be a no-brainer in a TABLE:

<table>
<tr>
    <th style="width: 150px; vertical-align: top;">
        <label>Address</label>
    </th>
    <td>
        <span>
        1 The test<br />
        AddressTown<br />
        UK
        </span>
    </td>
</table>

However I have been trying to achieve this with CSS, using float on just the label and on both, but no matter what I try, I'm in one of the following scenarios:

The second line of the span wraps below the label
The span starts directly beneath the label
I get a nice tabular layout BUT I have to specify the width of the span, which I don't want to do.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦毁影碎の 2024-11-16 14:33:16

根据我上面的评论，使用表格进行表格布局没有任何问题！但是，如果您确实不想使用表格，则可以将跨度设置为显示：块并为其留出边距。

<!DOCTYPE html>
<html>
    <label>Address</label>
    <span>
        1 The test<br />
        AddressTown<br />
        UK
    </span>

    <style>
        label { float: left; width: 200px; }
        span { margin-left: 200px; display: block; }
    </style> 
</html>

As per my comment above there is nothing wrong with using tables for a tabular layout! If however you really don't want to use tables, you can set the span to display: block and give it a margin.

<!DOCTYPE html>
<html>
    <label>Address</label>
    <span>
        1 The test<br />
        AddressTown<br />
        UK
    </span>

    <style>
        label { float: left; width: 200px; }
        span { margin-left: 200px; display: block; }
    </style> 
</html>

回复收藏 0 原文

~没有更多了~