display:内联块无法正常工作

时间:2014-03-14 02:07:47

标签: css

我让display: inline-block工作here。如您所见,复选框和文本水平对齐。

但它不适用于此fiddle

其实我要three problems在这里解决:

  1. 选中复选框和文字:Swing Equipment Also与复选框内联。
  2. 在正确的内容中,我有一个按钮Swing System,我希望它能够正确对齐。
  3. 如您所见,我有leftright个内容。它们大多是50%的宽度,我希望它们居中。目前它不是。
  4. 代码段:

    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;
    }
    

3 个答案:

答案 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工作。