复选框多列对齐 [英] Checkbox multi column alignment

问题描述

我有一个复选框，让我们说20个元素。我想拥有它

对齐为4列，5行。不使用表格和使用

可以理解的CSS是否有任何方法可以使复选框对齐，因为我想要
？


我试图获取以下选择器以获取文本部分

：输入[type =" checkbox"] + * {width：180px;}

到目前为止，我的尝试在FF中产生了奇怪，IE7中没有任何内容。


虽然超出了这个新闻组的范围，但是当一个范围被放置时
$ b每个复选框周围的$ b以下Javascript确实导致元素在IE7中对齐
，但不是FF或Opera

< span>< INPUT TYPE =''复选框''NAME =''国家[]''VALUE =''US''> United

状态< / span>


var Boxes = document .getElementsByName（" Countries []"）

for（i = 0; i< Boxes.length; i ++）

{

Boxes [i] .parentNode.style.width = 180 +" px"

}

谢谢你

I have a check box with let''s say 20 elements. I would like to have it
align as 4 columns, 5 rows. Without using a table and using
understandable CSS is there any way to make the check boxes align as I
would like?

I''ve been playing with the following selector in my attempts to get at
the text portion: input[type="checkbox"] + * {width:180px;}
So far my attempts have produced weirdness in FF and nothing occurs in IE7.

Although beyond the scope of this Newsgroup, when a span is placed
around each checkbox the following Javascript does cause the elements to
align in IE7, but not FF or Opera
<span><INPUT TYPE=''checkbox'' NAME=''Countries[]'' VALUE=''US'' >United
States</span>

var Boxes = document.getElementsByName("Countries[]")
for(i=0; i<Boxes.length; i++)
{
Boxes[i].parentNode.style.width = 180 + "px"
}
Thank you

推荐答案

2007-03-30，totalstranger< to *********** @ not.yahoo.netwrote ：

On 2007-03-30, totalstranger <to***********@not.yahoo.netwrote:

我有一个复选框，让我们说20个元素。我想拥有它

对齐为4列，5行。不使用表格和使用

可以理解的CSS是否有任何方法可以使复选框对齐，因为我想要
？


我试图获取以下选择器以获取文本部分

：输入[type =" checkbox"] + * {width：180px;}

到目前为止，我的尝试在FF中产生了奇怪，IE7中没有任何内容。

I have a check box with let''s say 20 elements. I would like to have it
align as 4 columns, 5 rows. Without using a table and using
understandable CSS is there any way to make the check boxes align as I
would like?

I''ve been playing with the following selector in my attempts to get at
the text portion: input[type="checkbox"] + * {width:180px;}
So far my attempts have produced weirdness in FF and nothing occurs in IE7.

CSS 2.1推荐的默认样式表说输入应该是

display：inline-block，它既不支持FF也不支持IE7。 />

你可能最好漂浮它们，或者将它们放在你需要浮动并设置宽度和高度的容器中。只要你将所有容器

设置为相同的高度，它们就会像内联块一样流动。

The recommended default stylesheet for CSS 2.1 says input should be
display: inline-block, which neither FF nor IE7 support.

You might be best to float them, or put them in containers which you
float and set width and height on. So long as you set all the containers
to the same heights they''ll flow much like inline blocks.

Scripsit Ben C：

Scripsit Ben C:

CSS 2.1的推荐默认样式表说输入应该是

display：inline-block，既不支持FF也不支持IE7。

The recommended default stylesheet for CSS 2.1 says input should be
display: inline-block, which neither FF nor IE7 support.

IE显示支持有限：自IE 5.5以来的内联块。


-

Jukka K. Korpela（Yucca）
http ：//www.cs.tut.fi/~jkorpela/

Scripsit totalstranger：

Scripsit totalstranger:

我有一个复选框，让我们说20个元素。

I have a check box with let''s say 20 elements.

你不能。复选框是单个元素。您应该已经发布了URL

，原因很多，包括它可能会给我们一些你真正得到的
的提示。

You can''t. A checkbox is a single element. You should have posted the URL
for many reasons, including the fact that it might give us a hint of what
you have really got.

我想拥有它

对齐为4列，5行。

I would like to have it
align as 4 columns, 5 rows.

对齐？看来你想把它们放到一张桌子里。为什么？哦，从来没有想过。只是_don''t_。

Align? It seems that you would like to put them into a table. Why? Oh, never
mind. Just _don''t_.

不使用表并使用

可理解的CSS有没有办法让复选框对齐，因为我

想要？

Without using a table and using
understandable CSS is there any way to make the check boxes align as I
would like?

只是文本框？没有标签？怎么会有用？

Just the textboxes? With no labels? How would that be useable?

< span>< INPUT TYPE =''复选框''NAME =''国家[]''VALUE =''美国''> United

States< / span>

<span><INPUT TYPE=''checkbox'' NAME=''Countries[]'' VALUE=''US'' >United
States</span>

所以你_do_有一些标签，只是标记不足。


试着猜猜你真正想要什么，我'建议标记为


< label>< INPUT TYPE =''复选框''NAME =''国家[]''VALUE =''美国''>美联航

States< / label>


带样式表


label {display：block;向左飘浮;宽度：9em;}


您需要根据估计的长度来猜测宽度为

属性的足够大的值。最长的标签。在你理解为什么设置

像素的宽度之后，不要再继续
。


无论如何，这个不是_useful_。 20个国家/地区可能几乎不合理，但不适用于200个国家/地区。提示国家的友好方式

是一个文本输入字段，用户可以在其中键入名称或两个或两个
三个字母的国家/地区代码。作者需要处理无聊的工作

查找或编写服务器端脚本，检查国家名称和

代码（并在需要时再次提示），而不是强迫用户做

无聊的查找工作。


-

Jukka K. Korpela（Yucca ）
http://www.cs.tut.fi/~ jkorpela /

So you _do_ have some labels, just with inadequate markup.

Trying to guess what you _really_ want, I''d suggest markup like

<label><INPUT TYPE=''checkbox'' NAME=''Countries[]'' VALUE=''US'' >United
States</label>

with a style sheet like

label { display: block; float: left; width: 9em;}

You need to make a guess on a sufficiently large value for the width
property, based on an estimate of the length of the longest label. Do not
proceed before you understand why it would be all wrong to set the width in
pixels.

Anyway, this is not _useful_. It might be barely reasonable for 20
countries, but not for 200 countries. The friendly way to prompt for country
is a text input field where the user can type a name or a two- or
three-letter country code. The author needs to take care of the boring work
of finding or writing a server-side script that checks the country name and
code (and prompts again when needed), instead of forcing to user to do
boring lookup work.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

这篇关于复选框多列对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！