无法定位按钮元素

Question

我使用 bootstrap 创建了一个提交按钮，但我想将它放在箭头指向的位置，但无论我写什么，位置都不会改变，就像按钮固定在该位置一样，我可以重新定位它我怎样才能把它放在那里？

.container {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  /*give the text bolder font*/
  font-weight: bold;
}
/*set the input under the span element*/
input[type=text] {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  /*set the space from left to 30%*/
  margin-left: 30%;
}
/* set the button under the input element*/
button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /*set the space from left to 30%*/
  margin-left: 30%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>quiz</title>
    <link rel="stylesheet" href="quiz2.css">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>
<body>
  <div class="container">
    <span id="question">What type of file do you need to open javascript file ?</span>
    <div class="input-group flex-nowrap">
      <input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <button type="button" id="submit" class="btn btn-outline-success">Submit</button>
  </div>

Answer 1

我只是定义了一个 button-container class 并使用 flex & justify:

.container {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  /*give the text bolder font*/
  font-weight: bold;
}


/*set the input under the span element*/

input[type=text] {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  /*set the space from left to 30%*/
  margin-left: 30%;
}


/* set the button under the input element*/

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /*set the space from left to 30%*/
  margin-left: 30%;
}

.button-container {
  display: flex;
  justify-content: start;
  margin-left: 30%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>quiz</title>
  <link rel="stylesheet" href="quiz2.css">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <span id="question">What type of file do you need to open javascript file ?</span>
    <div class="input-group flex-nowrap">
      <input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <div class="button-container">
      <button type="button" id="submit" class="btn btn-outline-success">Submit</button>
    </div>
  </div>

Answer 2

如果您可以更改 HTML，这里有一个方法：

将你的按钮包裹在另一个里面 div:

<div class="button-wrapper">
   <button type="button" id="submit" class="btn btn-outline-success">Submit</button>
</div>

然后在该包装器上设置 margin-left：

.button-wrapper {
  /*set the space from left to 30%*/
  margin-left: 30%;
}

检查此代码段以获取结果。

.container {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  /*give the text bolder font*/
  font-weight: bold;
}


/*set the input under the span element*/

input[type=text] {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  /*set the space from left to 30%*/
  margin-left: 30%;
}


/* set the button under the input element*/

button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-wrapper {
  /*set the space from left to 30%*/
  margin-left: 30%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>quiz</title>
  <link rel="stylesheet" href="quiz2.css">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <span id="question"></span>
    <div class="input-group flex-nowrap">
      <input type="text" id="answer" class="form-control" placeholder="Answer Here..." aria-label="Username" aria-describedby="addon-wrapping">
    </div>
    <div class="button-wrapper">
      <button type="button" id="submit" class="btn btn-outline-success">Submit</button>
    </div>
  </div>

无法定位按钮元素

Can't position button element

html

css

css-position

flexbox