将元素彼此相邻放置不包含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

你可以在最后p ......不是最好的解决办法，但一个可能的解决方法不改变HTML

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

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

Answer 2

我尝试了很多，但下面您的要求使用position: absolute似乎只可能通过绝对位置。只是为了好玩，我试图做出不显示：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>