在输入文本字段内放置问号提交按钮

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; 到父级，然后将其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 2

得到? 文本框内的按钮：

• 应用样式position: relative对于您的<form>
• right: 25%应用样式right: 25%对您的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 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;
}