css - 如何在 radio 旁边放置文本区域和文本输入？

Question

我必须做一个网站作业，我在将文本输入和文本区域放置在一个更大的单选框旁边时遇到了问题。我在堆栈溢出上看到过类似的帖子，但我的问题并没有解决。我需要这样的东西:/image/MUApR.png

.szavazas {
  margin-left: 5%;
  margin-top: 3%;
}

.raddio {
  float: left;
  width: 200px;
  margin-bottom: 5%;
  color: white;
  background: green;
  border-radius: 8px;
  border: 1px solid #003300;
  text-align: left;
  box-shadow: 0 0 2px 1px black;
  height: 350px;
}

input[type="radio"] {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.velemeny {
  float: left;
  box-shadow: 0 0 2px 1px black;
  width: 200px;
  height: 175px;
}

.textin {
  float: left;
  border: 1px solid black;
  background-color: #003300;
  color: white;
  width: 200px;
  height: 165px;
}

<div class="szavazas">
  <form class="raddio" action="/action_page.php">
    <input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
    <input type="radio" name="noveny" value="Gerbera">Gerbera<br>
    <input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
    <input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
    <input type="radio" name="noveny" value="Zöldike">Zöldike<br>
    <input type="radio" name="noveny" value="Borostyán">Borostyán<br>
    <input type="radio" name="noveny" value="Azálea">Azálea<br>
    <input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
    <input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
    <input type="radio" name="noveny" value="Filodendron">Filodendron<br>
  </form>
  <textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>
  <form class="textin" action="/action_page.php">
    Itt lesz valami hosszu szoveg amit ide fogok irni <br>
    <input type="text" name="masiknoveny">
  </form>
</div>

Answer 1

您可以使用 flex 属性以您想要的方式对齐它们。这是一个非常强大的 css 属性，可用于创建您需要的任何布局。

下面的代码应该可以帮助您理解并开始使用它。

关于 flex 的更多信息:https://codepen.io/enxaneta/full/adLPwv/

.layout {
  display: flex;
}

.right-side {
  display: flex;
  flex-direction: column;
}

.szavazas {
  margin-left: 5%;
  margin-top: 3%;
}

.raddio {
  float: left;
  width: 200px;
  margin-bottom: 5%;
  color: white;
  background: green;
  border-radius: 8px;
  border: 1px solid #003300;
  text-align: left;
  box-shadow: 0 0 2px 1px black;
  height: 350px;
}

input[type="radio"] {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.velemeny {
  float: left;
  box-shadow: 0 0 2px 1px black;
  width: 200px;
  height: 175px;
}

.textin {
  float: left;
  border: 1px solid black;
  background-color: #003300;
  color: white;
  width: 200px;
  height: 165px;
}

<div class="layout">
  <div class="left-side">
    <form class="raddio" action="/action_page.php">
      <input type="radio" name="noveny" value="Nagy Flamingóvirág">Nagy Flamingóvirág<br>
      <input type="radio" name="noveny" value="Gerbera">Gerbera<br>
      <input type="radio" name="noveny" value="Szobai Futóka">Szobai Futóka<br>
      <input type="radio" name="noveny" value="Rákvirág">Rákvirág<br>
      <input type="radio" name="noveny" value="Zöldike">Zöldike<br>
      <input type="radio" name="noveny" value="Borostyán">Borostyán<br>
      <input type="radio" name="noveny" value="Azálea">Azálea<br>
      <input type="radio" name="noveny" value="Anyósnyelv">Anyósnyelv<br>
      <input type="radio" name="noveny" value="Tarka Sárkányfa">Tarka Sárkányfa<br>
      <input type="radio" name="noveny" value="Filodendron">Filodendron<br>
    </form>
  </div>

  <div class="right-side">
    <textarea class="velemeny" rows="7" cols="40" placeholder="Irja le a véleményét a növényről/virágról és hogy találkozott-e már vele? "></textarea>

    <form class="textin" action="/action_page.php">
      Itt lesz valami hosszu szoveg amit ide fogok irni <br>
      <input type="text" name="masiknoveny">
    </form>
  </div>
</div>