如何將按鈕與輸入放在同一行

Question

你好我有問題，我想把按鈕“眼睛”放在我輸入的同一行。

我做了什么：

<body style="padding: 100px;">
    <h1>Connexion</h1>
    <div class="form d-flex justify-content-center bg-light pb-5 border">
        <div class="col-4"> 
            <form method="POST" class="needs-validation" novalidate>
                <div class="form-group">
                    <label><b>Email: </b></label>
                    <input class="form-control" type="email" placeholder="Entrer l'email" name="email" required>
                    <div class="invalid-feedback">
                        Merci de saisir une adresse mail.
                    </div>
                </div>
                <div class="form-group">
                    <label><b>Mot de passe: </b></label>
                    <input class="form-control" type="password" placeholder="Entrer le mot de passe" name="password" required>
                    <button type="button" id="eye"><i class="fa fa-eye"></i></button>
                    <div class="invalid-feedback">
                        Merci de saisir un mot de passe.
                    </div>
                </div>
                <input type="submit" class="btn btn-warning" value='Se connecter'>
            </form>
        </div>
    </div>
</body>

如您所見，我的按鈕在我的輸入下，我不知道為什么...

謝謝

Answer 1

您應該能夠將輸入和按鈕放入 div 容器中，並使用 flex 樣式使它們出現在同一行上。

html：

<div class="container">
    <input class="form-control" type="password" placeholder="Entrer le mot de passe" name="password" required>
    <button type="button" id="eye"><i class="fa fa-eye"></i></button>
</div>

css：

.container
{
    display: flex;
    flex-flow: row;
}

這應該使您的輸入和按鈕顯示在同一行。

Answer 2

您可以在 html 的單個 div 中將您打算放在一行中的所有內容包裝起來，例如：

<div class="form-line">
    <div class="input">
        <label><b>Mot de passe: </b></label>
        <input class="form-control" type="password" placeholder="Entrer le mot de passe" name="password" required>
    </div>
    <button type="button" id="eye"><i class="fa fa-eye"></i></button>
</div>

（當我們接下來添加 css 時，我放置了 label 並在他們自己的 div 中輸入以保留您在那里的任何堆疊樣式）。 然后在 css 中，您可以給它一個 flex 或一個內聯內容規則。

.form-line{
    display: flex;
}

或者...

.form-line *{
    display: inline-block;
}

如何將按鈕與輸入放在同一行

問題描述

2 個解決方案

解決方案1
-1 2020-11-25 14:51:19

解決方案2
-1 2020-11-25 15:02:50

如何將按鈕與輸入放在同一行

問題描述

2 個解決方案

解決方案1 -1 2020-11-25 14:51:19

解決方案2 -1 2020-11-25 15:02:50

解決方案1
-1 2020-11-25 14:51:19

解決方案2
-1 2020-11-25 15:02:50