WordPress中的布局更改

Question

我正在为我的 WordPress 网站制作一个联系表。当我在标准网页上对其进行测试时，它看起来像这样：

但是当我将代码粘贴到 WordPress 中时，它看起来像这样并做了一个段落。

有什么帮助吗？

如果有帮助，我也在使用 elementor。

代码如下：

.mailSec1 {
  padding: 0px;
  border-radius: 50px;
  width: 350px;
  border: #04aa6d 2px solid;
  padding-left: 37px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.mailSec1 input {
  font-size: 18px;
  width: 215px;
  outline: none;
  border: none;
}

.mailSec1 button {
  height: 50px;
  width: 85px;
  background-color: #04aa6d;
  color: #fff;
  border-radius: 40px;
  outline: none;
  font-size: 22px;
  border: none;
}

<div class="mailSec">
  <div class="mailSec1">
    <input type="email" name="email" placeholder="Tell us!">
    <button>Send</button>
  </div>
</div>

Answer 1

解决方案

使用flexbox 控制mailSec1 元素中元素的流动。

.mailSec1 {
    display: flex;
    flex-direction:  row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-right:  4px;
}