Question

我有html这样的http://jsfiddle.net/nLt9unxa/5/，我希望在一行中放置3个块.number__label，.text__label和.from__input。 .form__input必须与表单的右侧对齐，并且所有3个元素必须在一行中垂直对齐。这该怎么做？我不想使用display: table-cell

如果你知道关于对齐的非常好的教程或书籍，在哪里描述所有可能的对齐和收据如何做，如cheatsheet，请分享链接。

Answer 1

您忘记在: max-width and min-width之后将 .number__label 放入<{1}}

DEMO

.number__label {
    display: inline-block;
    background-color: #ffffff;
    border: solid 1px;
    max-width:20%;
    min-width:20%;
}

Answer 2

使用vertical-align：middle（或顶部或底部）。这是小提琴：http://jsfiddle.net/1ddewjxd/

.class
{  
    vertical-align: middle;
}

将元素右对齐设置父元素为text-align：right，子元素为text-align：left。你也可以浮动：对，但这会使事情变得复杂。

.item__label {
    text-align: right;
}
.number__label, text__label, form__input {
    text-align: left;
}

Answer 3

运行此代码段以检查是否所有要求都已完成？还要检查fiddle 查看CSS Layout或向W3School

学习

form {
    width:70%;
    background-color: #dddddd;
    font-size: 20px;

}
.itme__label {
    display: block;
    
}
.form__item {
    display: block;
    padding: 3px 5px;
}

.number__label {
    display: inline-block;
    background-color: #ffffff;
    border: solid 1px;
    max-width 20%;
    min-width 20%;
}
.text__label {
    display: inline-block;
    background-color: #888888;
    max-width: 50%;
}
.form__input {
    display: block;
    min-width: 20%;
    max-width: 20%;
    font-size: 1em;
    margin-left:120px;
  
}

<form>
    <div class="form__item">
        <p>
            <label class="item__label">
                <span class="number__label">
                01 12 31 23  123 2452 34534 5345
                </span>
                <span class="text__label">
                text label long long long very long long for two or more lines ong very long long for two or more linesong very long long for two or more lines
                </span>
                <input type="text" class="form__input" value="input text">
                
                </input>
            </label>
        </p>
        <div class="errors">
            <p class="error">
            some error
            </p>
        </div>
    </div>
</form>

如何将3个块（跨度，跨度，输入）放在一条垂直对齐的线上？

3 个答案: