当我把我的按钮放在div上时CSS不起作用

Question

我想在页面上自动按钮，但我不能把按钮放在div上，它们不起作用。谢谢你的帮助

＆＃13;

＆＃13;

   *:focus{
      outline:0px;
   }
   body{
      width:100%;
   }
   .buttons{
      width:200px;
      margin: 0 auto;
   }
       
   .tr,.eu{
      width:65px;height:30px;
      border-radius: 5px;
      border-color:transparent;
      background-color:#00405d;
      color:white;
      font-weight:500;
   }
   .tr:active,.eu:active{
      padding:3px;
   }

   .EU {display: none;}

   .eu:focus ~ .TR {display: none;}
   .tr:focus ~ .TR {display: block;}
   .tr:focus ~ .EU {display: none;}
   .eu:focus ~ .EU {display: block;}

＆＃13;

first 2 buttons
<button type="button" class="eu" name="button">EU</button> Working
<button type="button" class="tr" name="button">TR</button> Working
first 2 buttons
<br>
<br>

other 2 buttons in div
      <!--but doesnt work  bec of in div -->
      <div>
         <button type="button" class="eu" name="button">EU</button>doesnt work on div
         <button type="button" class="tr" name="button">TR</button>doesnt work on div
      </div>
      <!--but doesnt work bec of in div -->
other 2 buttons in div

      <br>
      <br>
      <br>
      
RESULT:
      <div class="TR">
         tr
      </div>
      <div class="EU">
         eu
      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将以下css规则添加到您的代码中

<button role="flights_submit" type="submit">Search</button>
<br/>
<br/>
<div class="mewtwo-flights-destination">
  <label for="flights-destination-prepop-whitelabel_en">Destination</label>

  <input type="text" name="destination_name" autocomplete="off" required="" id="flights-destination-prepop-whitelabel_en" placeholder="Destination" data-label="Destination" role="flights-destination" data-modal-modifier="whitelabel_en" data-placeholder-initialized="true">
  <br/>
  <br/>
  <label for="somethingElse">OtherLabel</label>
  <input type="text" id='somethingElse'>

  <input type="hidden" name="destination_iata" id="somethingElse" value="">
</div>

下面的代码段

＆＃13;

＆＃13;

button.eu,
button.tr {
  border: solid red;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  position: relative;
  left: 50%;
}
#btn_container {
  position: relative;
}

＆＃13;

var eu_btns = document.getElementsByClassName("eu");
var tr_btns = document.getElementsByClassName("tr");
var div1 = document.getElementsByClassName("TR")[0];
var div2 = document.getElementsByClassName("EU")[0];
for (var x = 0; x < eu_btns.length; ++x) {
  eu_btns[x].addEventListener("click", eu_click)
}
for (var x = 0; x < tr_btns.length; ++x) {
  tr_btns[x].addEventListener("click", tr_click)
}

function eu_click() {
  div2.style.display = "inline-block";
  div1.style.display = "none";

}

function tr_click() {
  div1.style.display = "inline-block";
  div2.style.display = "none";

}

＆＃13;

*:focus {
  outline: 0px;
}
body {
  width: 100%;
}
.buttons {
  width: 200px;
  margin: 0 auto;
}
.tr,
.eu {
  width: 65px;
  height: 30px;
  border-radius: 5px;
  border-color: transparent;
  background-color: #00405d;
  color: white;
  font-weight: 500;
}
.EU {
  display: none;
}
.eu:focus ~ .TR {
  display: none;
}
.tr:focus ~ .TR {
  display: block;
}
.tr:focus ~ .EU {
  display: none;
}
.eu:focus ~ .EU {
  display: block;
}
button.eu,
button.tr {
  border: solid red;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
  position: relative;
  left: 50%;
}
#btn_container {
  position: relative;
}
.TR,
.EU {
  display: inline-block;
}

＆＃13;

＆＃13;

＆＃13;