Question

请耐心等待我，因为我不熟悉前端设计。如何将以下复选框对齐并堆叠整齐，如图所示？

enter image description here

现在我将它们放在一排9个复选框中，但它们没有对齐，并且根据文本的长度间隔开。

如下所示： JSFiddle

HTML：

<div class="tags">
<div class="col">
<label>
    <input type="checkbox" rel="accounting" />Accounting</label>
<label>
    <input type="checkbox" rel="courier" />Courier</label>
<label>
    <input type="checkbox" rel="project-management" />Project Management</label>
<label>
    <input type="checkbox" rel="video-games" />Video Games</label>
<label>
    <input type="checkbox" rel="dentistry" />Dentistry</label>
<label>
    <input type="checkbox" rel="librarian" />Librarian</label>
<label>
    <input type="checkbox" rel="programmer" />Programmer</label>
<label>
    <input type="checkbox" rel="architect" />Architect</label>
</div>
<div class="col">
<label>
    <input type="checkbox" rel="photographer" />Photographer</label>
<label>
    <input type="checkbox" rel="it" />IT</label>
<label>
    <input type="checkbox" rel="artist" />Artist</label>
<label>
    <input type="checkbox" rel="web-developer" />Web Developer</label>
<label>
    <input type="checkbox" rel="web-designer" />Web Designer</label>
<label>
    <input type="checkbox" rel="neurologist" />Neurologist</label>
<label>
    <input type="checkbox" rel="veterinarian" />Veterinarian</label>
<label>
    <input type="checkbox" rel="teacher" />Teacher</label>
</div>
<div class="col">
<label>
    <input type="checkbox" rel="character-animator" />Character Animator</label>
<label>
    <input type="checkbox" rel="salesman" />Salesman</label>
<label>
    <input type="checkbox" rel="telemarketing" />Telemarketeing</label>
<label>
    <input type="checkbox" rel="construction" />Construction</label>
<label>
    <input type="checkbox" rel="lawyer" />Lawyer</label>
<label>
    <input type="checkbox" rel="actor" />Actor</label>
<label>
    <input type="checkbox" rel="policeman" />Policeman</label>
<label>
    <input type="checkbox" rel="forestry" />Forestry</label>
</div>
</div>
<!-- end tags -->

CSS：

.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
float: left;
}
.col {
width: 100%;
display: block;
margin-right: 10px;
}

label{
vertical-align: top;
float: left;
width: 160px;
}

修改 enter image description here

Answer 1

我使用表格布局。只需添加以下CSS：

.tags {
    display: table;
}
.col {
    display: table-row;
}
.col label {
    display: table-cell;
}

更新了小提琴：http://jsfiddle.net/5sz6qdos/13/

其他人可能会使用flexbox，但我自己从未使用过，所以不确定如何实现它。

然而，我可能会采用不同的方法，使其更具语义性，并使设置更灵活：

<ul class="tags">
    <li class="tag"><label>...
    ....<!--put ALL of your label elements in a single parent element-->
</ul>

和

.tag {
    display: block;
    float: left;
    width: 25%; /*for if you want 4 columns, or*/
    width: 120px; /*if you want specific widths*/
}
.tags:after { content: ""; display: table; clear: both; } /*clearfix*/

使用百分比将展示所有列，或使用固定像素将允许元素流动（我的偏好）。

Answer 2

首先改变你的html代码：

<input type="checkbox" name="accounting" id="accounting" rel="accounting" />
<label for="accounting">Accounting</label>

为每个复选框执行此操作。

然后执行以下css

.tags{clear:both}
.col{float:left;width:120px;/*adjust your width */}
.col lable, .col input{display:inline-block;}
.col label{width:120px;/*adjust your width */}
.col input{width:20px;/*adjust your width */}

Answer 3

所以你有点像我提到的同样的问题...文本不能成为你的基础。你必须设置一个实际宽度。

http://jsfiddle.net/tueez7bx/6/

这有效，但超出了你的极限。您应该考虑我在下面提供的其他选项。

此外，您无法按照自己的方式使用id。那是不对的。您需要将所有#col更改为.col。

第二次修改

因此，基于下面提供的评论，我已经意识到您正在尝试的目标。遗憾的是，由于文本和项目的灵活性，您需要为每个项目定义宽度以完美排列。如果您不知道最长的字符串是什么，那么您将遇到一个问题，即冒着字符串破坏字词或进入下一个复选框的风险。

您可以在此处看到：http://jsfiddle.net/5sz6qdos/22/

但是..如果你扩展容器的宽度并且只有更大的宽度，你就可以避免这种情况......

你可以在这里看到我想象你的问题：http://jsfiddle.net/5sz6qdos/28/

编辑前

你整体上做得很好......

http://jsfiddle.net/5sz6qdos/3/

.col {
   width: 160px;
   float: left;
   margin-right: 10px;
}

label{
    display: block;
}

这确定了一个宽度，并没有充分的灵活性。但它确实为您提供了使用此数据进行响应式布局的选项。

要按照您想要的方式获取盒子，您就无法使用纯CSS。你需要混合使用Javascript。无法使用CSS直接编辑复选框本身。您需要使用display: none隐藏复选框，并为框本身添加图像。完成此操作后，您将需要使用jQuery来检查并取消选中每个框。这是获得精确外观的唯一方法。

对于jQuery部分，有很多答案。

Answer 4

对于初学者，您使用的标签标签错误。他们不应该在他们内部输入。我将如何做你想做的事情是这样的：

<div class="col">
    <label>Job</label>
    <input>

    <label>Job</label>
    <input>
</div>

<div class="col">
    <label>Job</label>
    <input>

    <label>Job</label>
    <input>
</div>

然后在你的CSS ......

.col {
    display: inline-block;
    width: 33.3%;
    vertical-align: top;}

label {
    display: inline-block;
    width: 100px;}

input {
    display: inline-block;
    width: calc(100% - 100px);}

要确保列，标签和输入都能很好地触摸，您必须删除空格。您可以从代码本身中删除它，使用注释标记连接元素，或者在容器上将font-size设置为0。把它扔进你的CSS并不会有什么坏处：

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;}

Answer 5

感谢所有人的知识并推动正确的方向。

这是我在设置线宽时找到的工作解决方案。

JSFiddle

<强> HTML

<div class="filter">
<h3 style="text-align: center;">Blog Profession Filters</h3>
<ul class="checkbox">
    <li>
        <input type="checkbox" id="cb1" rel="accounting" value="accounting" />
        <label for="cb1">Accounting</label>
    </li>
    <li>
        <input type="checkbox" id="cb2" rel="project-management" value="project-management" />
        <label for="cb2">Project Management</label>
    </li>
    <li>
        <input type="checkbox" id="cb3" rel="information technology" value="information-technology" />
        <label for="cb3">Information Technology</label>
    </li>
    <li>
        <input type="checkbox" id="cb4" rel="courier" value="courier" />
        <label for="cb4">Courier</label>
    </li>
    <li>
        <input type="checkbox" id="cb5" rel="video-games" value="video-games" />
        <label for="cb5">Video Games</label>
    </li>
    <li>
        <input type="checkbox" id="cb6" rel="web-development" value="web-development" />
        <label for="cb6>">Web Development</label>
    </li>
    <li>
        <input type="checkbox" id="cb7" rel="veterinarian" value="veterinarian" />
        <label for="cb6>">Veterinarian</label>
    </li>
    <li>
        <input type="checkbox" id="cb8" rel="web-designer" value="web-designer" />
        <label for="cb6>">Web Designer</label>
    </li>
    <li>
        <input type="checkbox" id="cb9" rel="attorney" value="attorney" />
        <label for="cb9>">Attorney</label>
    </li>
    <li>
        <input type="checkbox" id="cb10" rel="medical-practitioner" value="medical-practitioner" />
        <label for="cb10>">Medical Practitioner</label>
    </li>
    <li>
        <input type="checkbox" id="cb11" rel="telemarketing" value="telemarketing" />
        <label for="cb11>">Telemarketing</label>
    </li>
    <li>
        <input type="checkbox" id="cb12" rel="construction" value="construction" />
        <label for="cb12>">Construction</label>
    </li>
</ul>
</div>
<div id="results">
<ul class="results">
    <li class="accounting" style="list-style-type:none"> <a href="" style="text-decoration: none">Accounting</a>

    </li>
    <li class="project-management" style="list-style-type:none"> <a href="{{ path('job3') }}" style="text-decoration: none">Game QA Project Management</a>

    </li>
    <li class="information-technology" style="list-style-type:none"> <a href="" style="text-decoration: none">Information Technology</a>

    </li>
    <li class="courier" style="list-style-type:none"> <a href="{{ path('job1') }}" style="text-decoration: none">Courier / Parcel Delivery</a>

    </li>
    <li class="video-games" style="list-style-type:none"> <a href="" style="text-decoration: none">Video Games</a>

    </li>
    <li class="web-development" style="list-style-type:none"> <a href="" style="text-decoration: none">Web Development</a>

    </li>
    <li class="veterinarian" style="list-style-type:none"> <a href="http://cnn.com" style="text-decoration: none">Veterinarian</a>

    </li>
    <li class="web-designer" style="list-style-type:none"> <a href="" style="text-decoration: none">Wed Designer</a>

    </li>
    <li class="attorney" style="list-style-type:none"> <a href="" style="text-decoration: none">Attorney</a>

    </li>
    <li class="medical-practitioner" style="list-style-type:none"> <a href="" style="text-decoration: none">Medical Practitioner</a>

    </li>
    <li class="telemarketing" style="list-style-type:none"> <a href="" style="text-decoration: none">Telemarketing</a>

    </li>
    <li class="construction" style="list-style-type:none"> <a href="" style="text-decoration: none">Construction</a>

    </li>
</ul>
</div>

<强> CSS

.filter {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}
ul.checkbox {
margin: 0;
padding: 0;
margin-left: 20px;
list-style: none;
}
ul.checkbox li input {
margin-right: .25em;
}
ul.checkbox li {
border: 1px transparent solid;
display:inline-block;
width:12em;
}
ul.checkbox li label {
margin-left:;
}
ul.checkbox li:hover, ul.checkbox li.focus {
background-color: lightyellow;
border: 1px gray solid;
width: 12em;
}
.results {
width: 850px;
padding: 25px;
border: 1px solid black;
margin: 25px;
}

复选框连续排列

5 个答案: