WordPress 中的布局更改
Layout changes in WordPress
我有一个正在为我的 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>
解决方案
使用flexbox
控制mailSec1
元素中的元素流。
.mailSec1 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-right: 4px;
}
我有一个正在为我的 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>
解决方案
使用flexbox
控制mailSec1
元素中的元素流。
.mailSec1 {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-right: 4px;
}