Place question mark submit кнопка внутри поля ввода текста

Question

У меня есть поле ввода и кнопка отправки, которая выглядит как вопросительный знак из-за стилизации css. Это то, что она в настоящее время выглядит следующим образом:

Как я могу поместить знак вопроса внутри поля ввода, как это:

div { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(50%); 
 
} 
 
div h1 { 
 
    text-align: center; 
 
    margin: 0px; 
 
} 
 
div p { 
 
    text-align: center; 
 
} 
 
.text { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    padding-left: 8px; 
 
    padding-right: 8px; 
 
    height: 35px; 
 
} 
 
.submit { 
 
    border: none; 
 
    background: none; 
 
    position: absolute; 
 
    top: 2px; 
 
    right: 0px; 
 
}

<div> 
 
    <h1>Heading</h1> 
 
    <p>Sub-Heading</p> 
 
    <form> 
 
    <input type="text" name="username" class="text"> 
 
    <input type="submit" class="submit" value="?"> 
 
    </form> 
 
</div>

JsFiddle : https://jsfiddle.net/ea1vrume/

Я попытался следующий стиль для кнопки отправки, но помещает его выход из которого я хочу, чтобы это было:

.submit { 
    position: absolute; 
    top: 2px; 
    right: 0px; 
} 

Answer 1

Чтобы получить ? кнопку внутри текстового поля:

• применить стиль position: relative к вашему <form>
• применить стиль right: 25% к кнопке ?

div { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(50%); 
 
} 
 
div h1 { 
 
    text-align: center; 
 
    margin: 0px; 
 
} 
 
div p { 
 
    text-align: center; 
 
} 
 
.text { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    padding-left: 8px; 
 
    padding-right: 22px; 
 
    height: 35px; 
 
    box-sizing: border-box; 
 
} 
 
.submit { 
 
    border: none; 
 
    background: none; 
 
    position: absolute; 
 
    top: 9px; 
 
    right: 25%; 
 
} 
 
form { 
 
    position: relative; 
 
}

<div> 
 
    <h1>Heading</h1> 
 
    <p>Sub-Heading</p> 
 
    <form> 
 
    <input type="text" name="username" class="text"> 
 
    <input type="submit" class="submit" value="?"> 
 
    </form> 
 
</div>

Answer 2

Абсолютное позиционирование будет провернуть это. Присвойте position: relative; родительскому элементу, и я сделал его inline-block, так что он будет только обертывать содержимое внутри вместо 100% ширины страницы, а затем позиционировать кнопку .submit абсолютно над текстовым вводом.

div { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(50%); 
 
} 
 

 
div h1 { 
 
    text-align: center; 
 
    margin: 0px; 
 
} 
 

 
div p { 
 
    text-align: center; 
 
} 
 

 
.submit { 
 
    border: none; 
 
    background: none; 
 
    position: absolute; 
 
    top: 2px; 
 
    right: 0px; 
 
} 
 
form { 
 
    text-align: center; 
 
} 
 
form > div { 
 
    display: inline-block; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.submit { 
 
    position: absolute; 
 
    right: 0; top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
.text { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding-left: 8px; 
 
    padding-right: 8px; 
 
    height: 35px; 
 
}

<div> 
 
    <h1>Heading</h1> 
 
    <p>Sub-Heading</p> 
 
    <form> 
 
    <div> 
 
     <input type="text" name="username" class="text"> 
 
     <input type="submit" class="submit" value="?"> 
 
    </div> 
 
    </form> 
 
</div>

Answer 3

Смотрите, если эта помощь https://jsfiddle.net/ea1vrume/1/

HTML

<div> 
    <h1>Heading</h1> 
    <p>Sub-Heading</p> 
    <form> 
    <input type="text" name="username" class="text"> 
    <input type="submit" class="submit" value="?"> 
    </form> 
</div> 

CSS:

div { 
    position: relative; 
    top: 50%; 
    transform: translateY(50%); 
    text-align: center; 
} 

div h1 { 
    text-align: center; 
    margin: 0px; 
} 

form { 
    position: relative; 
    width: 50%; 
    display: inline-block; 
} 

div p { 
    text-align: center; 
} 

.text { 
    display: block; 
    margin: 0 auto; 
    width: 100%; 
    box-sizing: border-box; 
    padding-left: 8px; 
    padding-right: 8px; 
    height: 35px; 
} 

.submit { 
    border: none; 
    background: none; 
    position: absolute; 
    top: 0; 
    transform: translateY(50%); 
    right: 0px; 
}