我让display: inline-block
工作here。如您所见,复选框和文本水平对齐。
但它不适用于此fiddle:
其实我要three problems
在这里解决:
Swing Equipment Also
与复选框内联。Swing System
,我希望它能够正确对齐。left
和right
个内容。它们大多是50%
的宽度,我希望它们居中。目前它不是。代码段:
HTML
<li>
<input type="checkbox" class="swing_checkbox" id="swing_equipment" /> <span id="swing_label_small">Swing Equipment Also</span>
</li>
CSS:
#swing_label_small, #swing_equipment {
display: inline-block;
font-size: 0.8em;
}
答案 0 :(得分:3)
制作复选框和文字:Swing Equipment也与复选框一致。
此css声明复选框的width
设置为90%
...
input {
position: relative;
width: 90%;
}
将其更改为......
input[type=text] {
position: relative;
width: 90%;
}
在正确的内容中,我有一个按钮Swing系统,我想让它正确对齐。
我注意到的第一件事是你在ul
内放置了一个按钮,它不能验证为正确的html。我建议你将它移出ul
,因为它在语义上不正确。但使用您所拥有的内容...将text-align:right
添加到ul
,然后将text-align:right
添加到子li
应该有效...
#right_content{
text-align:right;
}
ul#right_content > li {
border: 0px solid green;
margin: 0;
width: 100%;
position: relative;
text-align:left;
}
如您所见,我有左右内容。它们大多是宽度的50%,我希望它们居中。目前它不是。
我不太清楚你的意思......请澄清所以我可以修改我的答案
答案 1 :(得分:2)
1)对于复选框和文字问题:将width: auto;
应用于复选框:
.swing_checkbox {
width:auto;
}
以下是给复选框宽度为90%,这就是文本被下推到下一行的原因。
input {
position: relative;
width: 90%;
}
2)这样的东西会起作用,我在这里使用内联样式因为我很懒。请随意整理一下。
<ul class="content" id="right_content">
<li style="text-align: right;"> <button type="button" class="swing_btn">Swing System</button></li>
...
...
...
3)在容器上使用text-align:center;
,然后将text-align:left;
应用于其内部元素。这将以具有百分比定义宽度的块级元素为中心。但是,如果您有兴趣研究它们,还有其他方法可以做到这一点。
.swing_wrapper {
text-align: center;
}
ul.content,.swing_title, {
text-align: left;
}
4)您还应该查看一些调试工具,例如Firebug,它使用它的检查工具可以更轻松地调试这样的问题。
答案 2 :(得分:2)
以下是我所做的更改。
For 1)将CSS添加到复选框,因为你输入的所有内容都是:90%;
input[type="checkbox"]{
width:auto;
}
对于2)添加了一个div字段以清除这两个目的。然后让按钮向右浮动。
HTML:
<button type="button" class="swing_btn">Swing System</button>
<div class="clear"></div>
CSS:
.clear{ clear:both;}
#right_content > button
{
float:right;
}
3)因为你正在使用ul作为结构。有用于ul的填充。
删除破坏结构的内部ul填充。
ul li ul {
padding:0px;
}
给表一个保证金使其成为中心:
.swing_grid, tr, td {
border: 1px solid gray;
border-collapse: collapse;
margin: 0 auto;
}
最后让内容对齐中心:
ul.content {
border: 0px solid gray;
box-sizing: border-box;
width: 49%;
position: relative;
list-style-type: none;
display: inline-block;
vertical-align: top;
text-align: center;
}
这是我的FIDDLE工作。