轻柔一点

Question

所以，我知道桌子是撒旦的产物。如何在没有桌子的情况下对齐它？

我有一堆输入字段，每个字段的左边都有一个标签，我希望输入字段的左侧对齐。糟糕的ascii艺术如下：

                                   name ________________    
                          date of birth ________________  
 Shakespeare villain I would like to be ________________  
                  favo(u)rite do(gh)nut ________________  
                      pet's blood group ________________  
                   mother's maiden name ________________  
         favo(u)rite Led Zeppelin track ________________

我不需要确切的代码，只是被告知如何操作。

This page看起来非常有帮助，但我如何使用文字＆amp;输入文件？

也许是＆lt; div＆gt;文本向右浮动，输入字段垂直对齐为50％？

Answer 1

尝试display: table-cell;

.wrapper {
    display: table;
}

.inner {
    display: table-cell;
}

Answer 2

＆＃13;

$(function(){
    $(document).on("click", ".blick", function(){
        var $this = $(this);
        var buttonName = $this.attr("name");
    });
});

＆＃13;

#wrapper div.td1 {
  text-align: right;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  /* added incase of too long label text */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#wrapper div {
  width: 50%;
  display: inline-block;
  text-align: left;
  padding-left: 5px;
  margin-right: -5px;
}
#wrapper {
  width: 100%;
  line-height: 1.5em;
}

＆＃13;

Answer 3

你可以得到的最好的事情是重新创建具有不同DOM元素的表格布局以及一些显示：table - ***声明：

div.parent { display:table; }
div.parent > row { display:table-row; }
div.parent > row > * { display:table-cell; }
div.parent > row > label { text-align:right; padding: 0 0.25em; }
div.parent > row > label::after { content:":"; }

<div class="parent">
  <row>
    <label>name</label>
       <p>_____________</p>
  </row><row>  
    <label>date of birth</label>
       <p>_____________</p>    
  </row><row>      
    <label>Shakespeare villain I would like to be</label>
       <p>_____________</p>    
  </row><row>  
    <label>favo(u)rite do(gh)nut</label>
       <p>_____________</p>    
  </row><row>      
    <label>pet's blood group</label>
       <p>_____________</p>    
  </row><row>      
    <label>mother's maiden name</label>
       <p>_____________</p>    
  </row><row>      
    <label>favo(u)rite Led Zeppelin track</label>
       <p>_____________</p>
  </row>      
</div>

Answer 4

轻柔一点

根据布局的其余部分，这可能会有一些限制; 将其视为实验。

为了减少使用的HTML数量以及少量的CSS，我们可以使用flexbox布局。

兼容性： IE 11+ and all modern browsers

<form>容器被赋予display: flex，并且为了对齐其输入中心的每个标签align-items: center。 flex-wrap: wrap用于表示行。

输入和标签是flex: 1 1 50%。这使它们的初始宽度为50％，然后随容器增长和收缩。只要标签和输入初始值加起来为100％，就可以更改50％的初始值以使输入更宽或更小。

行在输入上以margin: 5px 0 5px间隔开，以提供顶部和底部边距。顶部和底部边距值应保持不变，以便标签居中。

box-sizing: border-box将边框和填充合并到元素的宽度和高度

A guide to Flexbox非常有用。

完整示例

使用min-width和max-width可以很好地控制表单，以保持一定的灵活性。

* {
  box-sizing: border-box;
}
form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 600px;
  min-width: 300px;
}
label {
  text-align: right;
  flex: 1 1 50%;
  padding-right: 10px;
}
input {
  flex: 1 1 50%;
  margin: 5px 0 5px;
}

<form>
  <label for="label1">This is a really long label</label>
  <input id="label1" type="text">
  <label for="label2">Smaller label</label>
  <input id="label2" type="text">
  <label for="label3">Tiny</label>
  <input id="label3" type="text">
</form>

没有桌子对齐

4 个答案:

轻柔一点

完整示例