精心包装的复选框标签？ [英] Nicely Wrapped Checkboxes Labels?
问题描述
两部分问题：
1）我想要很好地缩进复选框标签，即使发生
换行（例如， < li>包装的方式）。所以，我想要
这个（其中_=复选框）：
_苹果是我最喜欢的水果
_石榴是我的最爱
水果
_橘子是我最喜欢的水果
_油桃是我最喜欢的
水果
与此相反：
_苹果是我最喜欢的水果
_石榴是我的最爱
水果
_橘子是我最喜欢的水果
_ Nectarines是我最喜欢的
水果
我想在没有桌子的情况下这样做。是否有一种使用
样式表的好方法？
2）我想使用样式表做两列复选框thingamabob。
这种事情是可以做的（在常见的浏览器上），但是在不兼容的浏览器中，哪个
会很好地降级？例如：
我最喜欢的水果是：
_苹果_橘子
_星_油桃
水果_桃子
_石榴_葡萄
（注意我在那里做了一个包装的例子，Star Fruit：）
最后，有没有任何资源可以汇编这些类型的
（假设是常见的）形式技巧？
谢谢！
Jamie
Two part question:
1) I''d like to do have nicely indented checkbox labels, even where
wraps occur (for instance, the way <li> wrapping works). So, I''d like
this (where "_" = checkbox):
_ Apples are my favorite fruit
_ Pomegranates are my favorite
fruit
_ Oranges are my favorite fruit
_ Nectarines are my favorite
fruit
As opposed to this:
_ Apples are my favorite fruit
_ Pomegranates are my favorite
fruit
_ Oranges are my favorite fruit
_ Nectarines are my favorite
fruit
I''d like to do this without tables. Is there a nice way using
stylesheets?
2) I''d like to do a two column checkbox thingamabob using stylesheets.
Is this sorta thing possible to do (on common browsers), but which
will degrade nicely in non-compatible browsers? Example:
My favorite fruit is:
_ Apples _ Oranges
_ Star _ Nectarines
Fruit _ Peaches
_ Pomegranates _ Grapes
(Notice I worked a wrapped example, "Star Fruit" in there, too :)
Finally, are there any resources with compilations of these sorts of
(assumed to be common) form tricks?
Thanks!
Jamie
推荐答案
" Jamie Jackson" < MC ********** @ hotmail.com>在消息中写道
news：on ******************************** @ 4ax.com ...
"Jamie Jackson" <mc*************************@hotmail.com> wrote in message
news:on********************************@4ax.com...
两个部分的问题：
1）我想有很好的缩进复选框标签，即使发生了包装（例如， < li>包装的方式）。所以，我想要
这个（其中_= =复选框）：
_苹果是我最喜欢的水果
_石榴是我最喜欢的水果
_橘子是我最喜欢的水果
_油桃是我最喜欢的水果
相对于此：
_苹果是我的最爱水果
_石榴是我最喜欢的水果
_橘子是我最喜欢的水果
_油桃是我最喜欢的水果
我''我想在没有桌子的情况下这样做。有没有使用
样式表的好方法？
Two part question:
1) I''d like to do have nicely indented checkbox labels, even where
wraps occur (for instance, the way <li> wrapping works). So, I''d like
this (where "_" = checkbox):
_ Apples are my favorite fruit
_ Pomegranates are my favorite
fruit
_ Oranges are my favorite fruit
_ Nectarines are my favorite
fruit
As opposed to this:
_ Apples are my favorite fruit
_ Pomegranates are my favorite
fruit
_ Oranges are my favorite fruit
_ Nectarines are my favorite
fruit
I''d like to do this without tables. Is there a nice way using
stylesheets?
这是一种方法：
<！ DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< title>定位复选框< / title>
< style type =" text / css">
h1 {text-align：center; }
形式{width：15em;保证金：1em auto;填充：0;边框：薄实体
black;}
div.checkitem，div.submititem {margin-top：0.5em;明确：两者; }
input.checkbox {width：1.5em; }
label {float：right;宽度：13em; }
< / style>
< / head>
< body>
< h1>定位复选框< / h1>
< form action =" someurl">
< div class =" checkitem">
< label for =" item1">您如何看待经济？< / label>
< input id =" item1"名称= QUOT; ITEM1和QUOT;类= QUOT;复选框" type =" checkbox">
< / div>
< div class =" checkitem">
< label for =" item2">英国
有多少国王和王后？< / label>
< input id =" item2"名称= QUOT; ITEM2"类= QUOT;复选框" type =" checkbox">
< / div>
< div class =" checkitem">
< label for =" item3">什么是晚餐？< / label>
< input id =" item3"名称= QUOT;项目3"类= QUOT;复选框" type =" checkbox">
< / div>
< div class =" checkitem">
<标签为=" item4">如果土拨鼠
可以砍木头多少木头夹头？< / label>
< input id =" ; ITEM4"名称= QUOT; ITEM4"类= QUOT;复选框" type =" checkbox">
< / div>
< div class =" checkitem">
< label for =" item5">这会让我看起来很胖吗？< / label>
< input id =" item5"名称= QUOT; ITEM5"类= QUOT;复选框" type =" checkbox">
< / div>
< div class =" submititem">
< input id =" submitbutton"命名= [提交"类型= [提交" value =" Submit">
< / div>
< / form>
< / body>
< / html>
Here''s an approach:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positioned Checkboxes</title>
<style type="text/css">
h1 { text-align: center; }
form { width: 15em; margin: 1em auto; padding: 0; border: thin solid
black;}
div.checkitem, div.submititem { margin-top: 0.5em; clear: both; }
input.checkbox { width: 1.5em; }
label { float: right; width: 13em; }
</style>
</head>
<body>
<h1>Positioned Checkboxes</h1>
<form action="someurl">
<div class="checkitem">
<label for="item1">What do you think about the economy?</label>
<input id="item1" name="item1" class="checkbox" type="checkbox">
</div>
<div class="checkitem">
<label for="item2">How many kings and queens has the United Kingdom
had?</label>
<input id="item2" name="item2" class="checkbox" type="checkbox">
</div>
<div class="checkitem">
<label for="item3">What''s for dinner?</label>
<input id="item3" name="item3" class="checkbox" type="checkbox">
</div>
<div class="checkitem">
<label for="item4">How much wood would a woodchuck chuck if a woodchuck
could chuck wood?</label>
<input id="item4" name="item4" class="checkbox" type="checkbox">
</div>
<div class="checkitem">
<label for="item5">Do this make me look fat?</label>
<input id="item5" name="item5" class="checkbox" type="checkbox">
</div>
<div class="submititem">
<input id="submitbutton" name="submit" type="submit" value="Submit">
</div>
</form>
</body>
</html>
Jamie Jackson写道：
Jamie Jackson wrote:
我想要即使在
包裹发生的地方（例如，< li>包装工作的方式），也可以很好地缩进复选框标签。所以，我会喜欢这个（其中_=复选框）：
_苹果是我最喜欢的水果
_石榴是我最喜欢的水果
您可以将输入浮动，将文本标记为< label> （无论如何你应该做的是
），并在< label>处留下保证金。然而，
浮动使事情变得脆弱，在这种情况下没有太大的好处。你已经收到了警告。
2）我想用
样式表做两列复选框thingamabob。
I''d like to do have nicely indented checkbox labels, even where
wraps occur (for instance, the way <li> wrapping works). So, I''d
like this (where "_" = checkbox):
_ Apples are my favorite fruit
_ Pomegranates are my favorite
fruit
You could float the input left, mark up the text as <label> (which
you should do anyways), and apply a margin left to <label>. However,
floats make things fragile, in this case for not much benefit. You
have been warned.
2) I''d like to do a two column checkbox thingamabob using
stylesheets.
列更加冒险。你可以创建两个列表，然后浮动一个
，但这对于html来说是次优的，而html是最重要的b $ b重要的。 br />
-
Brian（删除.invalid给我发电子邮件）
http://www.tsmchughs.com/
2004年6月29日星期二，杰米杰克逊写道：
On Tue, 29 Jun 2004, Jamie Jackson wrote:
两部分问题：
1）我想要很好地缩进复选框标签，即使
包裹发生（例如，< li>包装的方式）。所以，我想要
这个（其中_= =复选框）：
_苹果是我最喜欢的水果
_石榴是我最喜欢的水果
_橘子是我最喜欢的水果
_油桃是我的最爱
水果
[...]
我我想在没有桌子的情况下这样做。有没有一种使用
样式表的好方法？
Two part question:
1) I''d like to do have nicely indented checkbox labels, even where
wraps occur (for instance, the way <li> wrapping works). So, I''d like
this (where "_" = checkbox):
_ Apples are my favorite fruit
_ Pomegranates are my favorite
fruit
_ Oranges are my favorite fruit
_ Nectarines are my favorite
fruit
[...]
I''d like to do this without tables. Is there a nice way using
stylesheets?
如果您正在考虑将复选框作为普通文本流的一部分，
然后该效果的技术术语是悬挂缩进。这样做的CSS
提供了一个负文本缩进属性，
http://www.w3.org/TR/REC-CSS2/text.h...dentation-prop
你将与合适的保证金一起使用（例如）。
但是，因为你真的不知道你的复选框有多大
是，你不知道用多少余量和负凹痕用于
整齐排列。
所以我认为布莱恩的浮动建议可能是一种更灵活的方式，然后就是。
If you''re considering your checkboxes as part of the normal text flow,
then the technical term for this effect is "hanging indent". What CSS
offers for doing this is a negative text-indent property,
http://www.w3.org/TR/REC-CSS2/text.h...dentation-prop
which you''d use in conjunction with a suitable margin (for example).
However, since you don''t really know how big your checkbox is going to
be, you don''t know how much margin and negative-indent to use for a
neat alignment.
So I think Brian''s suggestion of a float is probably a more flexible
approach, then.
这篇关于精心包装的复选框标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
