在没有包装div的情况下将元素放在彼此旁边

Question

我目前正在设计一个WordPress网站的联系表单。期望的结果应该如下所示：

通常，使用文本字段周围的包装器div可以轻松实现这一点。由于这是WordPress，我无法在不插入插件的情况下这样做（这是我想做的最后一件事）。 HTML WordPress产生如下所示：

<form ...>
  <p class="..." data-id="name" data-type="input">
    <label ...>Naam Achternaam</label>
    <input type="text" ...>
  </p>
  <p class="..." data-id="company" data-type="input">
    <label ...>Bedrijf</label>
    <input type="text" ...>
  </p>
  <p class="..." data-id="email" data-type="input">
    <label ...>E-mail</label>
    <input type="email" ...>
  </p>
  <p class="..." data-id="phone" data-type="input">
    <label ...>Telefoonnummer</label>
    <input type="text" ...>
  </p>
  <p class="..." data-id="message" data-type="text">
    <label ...>Vragen / opmerkingen</label>
    <textarea ...></textarea>
  </p>
  ...
</form>

目前看起来像这样：

是否有可能实现我在使用此HTML结构之后所做的事情，或者我是否需要找到一种方法来容纳包装器div？

Answer 1

您可以在最后position: absolute上使用p ...这不是最好的解决方案，但可以在不更改HTML

的情况下进行解决方法

＆＃13;

＆＃13;

form {
  background: #00CDD4;
  display: flex;
  flex-direction: column;
  position: relative;
}

form p {
  margin: 1em;
  display: flex;
  flex-direction: column;
  width: 45%;
}

form p label {
  text-transform: uppercase;
  font-family: sans-serif;
  opacity: .87;
}

form p input {
  border: none;
  padding: 1em;
}

form p:last-of-type {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

form p:last-of-type textarea {
  height: 100%;
}

＆＃13;

<form>
  <p class="..." data-id="name" data-type="input">
    <label ...>Naam Achternaam</label>
    <input type="text" ...>
  </p>
  <p class="..." data-id="company" data-type="input">
    <label ...>Bedrijf</label>
    <input type="text" ...>
  </p>
  <p class="..." data-id="email" data-type="input">
    <label ...>E-mail</label>
    <input type="email" ...>
  </p>
  <p class="..." data-id="phone" data-type="input">
    <label ...>Telefoonnummer</label>
    <input type="text" ...>
  </p>
  <p class="..." data-id="message" data-type="text">
    <label ...>Vragen / opmerkingen</label>
    <textarea ...></textarea>
  </p>

</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我尝试了很多，但是按照你的要求，似乎只能通过绝对位置。只是为了好玩，我试图在没有显示的情况下制作：flex;

body {
  background-color: #2dccd3;
  font-family: 'Montserrat', sans-serif;
}

form.contact{
  position: relative;
}

p.contact-field {
  width: 45%;
}

p.contact-field input{
  width: 100%;
}

input, label {
    display:block;
}

p.contact-field:last-child{
  margin: 0px;
}

.contact-field:last-child{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 50%;
  height: 89%;
}

textarea#message{
  height: 100%;
}

<form class="contact">
  <p class="contact-field" data-id="name" data-type="input">
    <label for="name">Naam Achternaam</label>
    <input id="name" type="text" name="name">
  </p>
  <p class="contact-field" data-id="company" data-type="input">
    <label for="company">Bedrijf</label>
    <input id="company" type="text" name="company">
  </p>
  <p class="contact-field" data-id="email" data-type="input">
    <label for="email">E-mail</label>
    <input id="email" type="email" name="email">
  </p>
  <p class="contact-field" data-id="phone" data-type="input">
    <label for="phone">Telefoonnummer</label>
    <input id="phone" type="text" name="phone">
  </p>
  
  <p class="contact-field" data-id="message" data-type="text">
    <label for="message">Vragen / opmerkingen</label>
    <textarea id="message" name="message"></textarea>
  </p>
</form>