在輸入文本字段內放置問號提交按鈕

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;
}