Question

我正在尝试将texbox转到按钮，但我的情况是第一行texbox然后下一行按钮 HTML： -

 <div class="styled-input" id="surnamediv">
                                <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
                                <label>Surname</label>
                                <span></span>
                            </div>

CSS： -

.custom-input #surnamediv #add{
        vertical-align:middle;
    }

Answer 1

尝试这些风格

#surnamediv {
   display: flex;
   align-items: center;
}
#surnamediv label {
    margin-left: 10px;
}

＆＃13;

 
#surnamediv {
   display: flex;
   align-items: center;
}
#surnamediv label {
margin-left: 10px;
}

＆＃13;

<div class="styled-input" id="surnamediv">
                            <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
                            <label>Surname</label>
                            <span></span>
                        </div>

＆＃13;

Answer 2

使用flex进行垂直对齐

<style>
    .styled-input {
    width:100℅;
    display:flex;
    align-items:center;
    }
    </style>

Answer 3

＆＃13;

 
#surnamediv {
   display: table;
}
#surnamediv input,  #surnamediv button, #surnamediv label {
   display: table-cell;
   vertical-align: middle;
}
#surnamediv label {
 padding-left: 10px;
}

＆＃13;

<div class="styled-input" id="surnamediv">
                            <input type="text" id="surName" /><button id="add" class="hidden">Add</button>
                            <label>Surname</label>
                            <span></span>
                        </div>

＆＃13;

垂直对齐不在div中工作

3 个答案: