WordPress中的布局更改

Posted 2023-03-05

【中文标题】WordPress中的布局更改

【英文标题】：Layout changes in WordPress

【发布时间】：2021-09-05 02:26:25

【问题描述】：

我正在为我的 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>

【问题讨论】：

很难检查代码，如果您提供网站 URL，那就太好了。

使用您的浏览器开发工具找出当前应用于元素的样式。其中一个可能是 display: block 之类的东西，或者祖先可能是 flexbox 元素，或者任何数量的东西。

如果您将其粘贴到所见即所得的编辑器中，它有时也可以添加自动段落。使用 remove_filter ('the_content', 'wpautop');通常会禁用此功能（如果您使用的是子主题，请将其添加到 functions.php 或类似内容中）。关于 wpautop 的更多信息 - developer.wordpress.org/reference/functions/wpautop 如前所述，它可能是很多东西，但应该可以通过一些 CSS 来修复。我们需要有关此问题的更多信息以提供进一步帮助。

【参考方案1】：

解决方案

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

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

【讨论】：

投反对票，原因如下： 缺少对问题的解释。缺少对“解决方案”的解释。缺少最小的、可重现的代码 sn-p 形式的验证。 flex-directcion: row; 和 flex-wrap: nowrap; 是多余的，因为它们是这些属性的标准值。

@tacoshy 我使用了flex-directcion: row; 和flex-wrap: nowrap; 属性来让@jake 解释弹性项目流的行为

这可以通过充分的解释来完成，即您的答案首先是alcking。请编辑您的答案以包含其他用户可以理解的解释。

@tacoshy，这纯粹是一个 CSS 冲突问题；没有人能从图片中看出有多少 CSS 问题

@tacoshy 我刚刚为此类问题提供了最佳解决方案