用CSS替换2列表 [英] Replacing a 2 column table with CSS
问题描述
大家好，
我有一个包含2列表的表单。在左栏中是特定输入的
描述（即 - First Name，Last Name，Phone
Number等。 ）。在右列中是输入元素。左栏
右对齐，右栏左对齐。我想
用不使用表格进行布局的代码替换这个表格，并且希望有人能够帮助我使用HTML和相应的CSS 。
我的想法是HTML将是这样的：
< form action =" formhandler.asp" method =" post">
< div>
< span class =" inputdesc">名字：< / span>
< span class =" forminput">< input type =" text"名称= QUOT;姓名" size =" 20"
maxlength =" 50">< / span>
< / div>
< div>
< span class =" inputdesc">姓氏：< / span>
< span class =" forminput">< input type =" text"名称= QUOT;姓" size =" 20"
maxlength =" 50">< / span>
< / div>
.. 。
< / form>
请注意，我想要所有的inputdesc。要正确对齐的项目，以及forminput的所有
要左对齐的项目。奇怪的是，这看起来很像
table-ish。 :)
任何输入（关于上面的HTML以及CSS需要看起来像什么）
非常感谢。
问候，
Peter Foti
Hi all,
I have a form that contains a 2 column table. In the left column is the
description for a particular input (ie - "First Name", "Last Name", "Phone
Number", etc.). In the right column is the input element. The left column
is right aligned and the right column is left aligned. I would like to
replace this table with code that does not use a table for layout, and was
hoping someone might be able to help me with the HTML and corresponding CSS.
My thoughts are that the HTML will be something like this:
<form action="formhandler.asp" method="post">
<div>
<span class="inputdesc">First Name:</span>
<span class="forminput"><input type="text" name="firstname" size="20"
maxlength="50"></span>
</div>
<div>
<span class="inputdesc">Last Name:</span>
<span class="forminput"><input type="text" name="lastname" size="20"
maxlength="50"></span>
</div>
...
</form>
Note that I want all of the "inputdesc" items to be right aligned, and all
of the "forminput" items to be left aligned. Oddly enough, this looks very
"table-ish". :)
Any input (regarding the HTML above and what the CSS will need to look like)
is greatly appreciated.
Regards,
Peter Foti
推荐答案
Peter Foti写道：
Peter Foti wrote:
我有一个包含2列表的表单。在左栏中
是特定输入的描述（即 - 名字，最后名称，电话号码等）。在右栏中输入
元素。左列右对齐，右列左对齐。我想用代码来替换这个表，
不使用表格进行布局，
请注意，可以说明这是表格数据，并且
属于一个表。我决定不对我的表格使用表格标记，fwiw。
希望有人能够帮助我使用HTML和
相应的CSS。我的想法是HTML将是这样的东西：
< form action =" formhandler.asp"方法= QUOT;交"> < DIV> < span
class =" inputdesc">名字：< / span>
使用label元素而不是语义中性span元素。
< span class =" forminput">< input type ="文本" name =" firstname"
size =" 20" MAXLENGTH = QUOT; 50">< /跨度>
你不需要这里的跨度。只是输入，ma''am。
请注意，我想要所有的inputdesc。要对齐的项目，
和所有forminput要左对齐的项目。奇怪的是，这看起来非常桌面。 :)
的确如此。见上文。
非常感谢任何输入（关于上面的HTML以及CSS需要什么样的外观）。
I have a form that contains a 2 column table. In the left column
is the description for a particular input (ie - "First Name", "Last
Name", "Phone Number", etc.). In the right column is the input
element. The left column is right aligned and the right column is
left aligned. I would like to replace this table with code that
does not use a table for layout,
Note that one could make the case that this is tabular data, and
belongs in a table. I decided not to use table markup for my forms, fwiw.
was hoping someone might be able to help me with the HTML and
corresponding CSS. My thoughts are that the HTML will be something
like this:
<form action="formhandler.asp" method="post"> <div> <span
class="inputdesc">First Name:</span>
Use the label element instead of the semantically neutral span element.
<span class="forminput"><input type="text" name="firstname"
size="20" maxlength="50"></span>
You don''t need a span here. Just the input, ma''am.
Note that I want all of the "inputdesc" items to be right aligned,
and all of the "forminput" items to be left aligned. Oddly enough,
this looks very "table-ish". :)
Indeed. See above.
Any input (regarding the HTML above and what the CSS will need to
look like) is greatly appreciated.
我做过的表格示例：
http://www.julietremblay.com/site/contact.html
-
Brian
按照我的地址中的指示给我发电子邮件
an example of a form I did:
http://www.julietremblay.com/site/contact.html
--
Brian
follow the directions in my address to email me
" Brian" <我们***** @ mangymutt.com.invalid-除去-这部分>在消息中写道
news：GZyjb.572821
"Brian" <us*****@mangymutt.com.invalid-remove-this-part> wrote in message
news:GZyjb.572821
cF.246886@rwcrnsc53 ...
cF.246886@rwcrnsc53...
Peter Foti写道：
Peter Foti wrote:
我有一个包含2列表的表单。在左栏中
是特定输入的描述（即 - 名字，最后名称，电话号码等）。在右栏中输入
元素。左列右对齐，右列左对齐。我想用不使用表格进行布局的代码替换这个表格，
请注意，可以说明这是表格数据，并且
属于表格。我决定不对我的表格使用表格标记，fwiw。
I have a form that contains a 2 column table. In the left column
is the description for a particular input (ie - "First Name", "Last
Name", "Phone Number", etc.). In the right column is the input
element. The left column is right aligned and the right column is
left aligned. I would like to replace this table with code that
does not use a table for layout,
Note that one could make the case that this is tabular data, and
belongs in a table. I decided not to use table markup for my forms, fwiw.
我确实考虑过这种可能性，但我觉得我的太多了
做的是表现性的（例如对齐列......我可能会在初始设计完成后想要添加更多的演示文稿）
I did consider that possibility, but I felt that too much of what I was
doing was presentational (aligning the columns, for instance... and I may
want to add more presentation once the initial design is done).
希望有人能够帮助我使用HTML和
相应的CSS。我的想法是HTML将是这样的东西：
< form action =" formhandler.asp"方法= QUOT;交"> < DIV> < span
class =" inputdesc">名字：< / span>
使用label元素而不是语义中性span元素。
was hoping someone might be able to help me with the HTML and
corresponding CSS. My thoughts are that the HTML will be something
like this:
<form action="formhandler.asp" method="post"> <div> <span
class="inputdesc">First Name:</span>
Use the label element instead of the semantically neutral span element.
啊，是的。几乎忘记了这一点。 :)
Ah, yes. Almost forgot about that. :)
< span class =" forminput">< input type =" text" name =" firstname"
size =" 20" maxlength =" 50">< / span>
你不需要这里的跨度。只是输入，ma''am。
<span class="forminput"><input type="text" name="firstname"
size="20" maxlength="50"></span>
You don''t need a span here. Just the input, ma''am.
实际上，同时使用inputdesc和inputdesc。 span和forminput跨度我是
试图将所有定位信息与元素分开
本身。我知道，这有点多余。还不确定我是否想要保留或转储它们。 :)
Actually, with both the "inputdesc" span and the "forminput" spans I was
trying to keep all of the positioning information separate from the elements
themselves. It''s a little redundant, I know. Not sure yet whether I want
to keep ''em or dump ''em. :)
请注意，我想要所有的inputdesc。要对齐的项目，
和所有forminput要左对齐的项目。奇怪的是，这看起来非常桌面。 ：）
Note that I want all of the "inputdesc" items to be right aligned,
and all of the "forminput" items to be left aligned. Oddly enough,
this looks very "table-ish". :)
的确如此。见上文。
Indeed. See above.
非常感谢任何输入（关于上面的HTML以及CSS需要的内容）。
Any input (regarding the HTML above and what the CSS will need to
look like) is greatly appreciated.
我所做表格的一个例子：
http://www.julietremblay.com/site/contact.html
谢谢。我相信这会证明是有用的。 :)
问候，
Peter Foti
Thanks. I''m sure this will prove useful. :)
Regards,
Peter Foti
这篇关于用CSS替换2列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
