在基本WordPress站点中对齐div

时间:2017-06-12 作者:Luke 5 Dev

试图清理一个网站,其中有人在现有主题之外使用了“页面生成器”插件。在下面的页面上,我删除了所有插件代码,但是。。。“下一步”下面的文本未与右侧的“自由”按钮顶部对齐。我尝试使用float方法,甚至将div显示为表格单元格。它将在临时测试环境中工作,但我将其粘贴到此站点后就无法工作了。Example page

3 个回复
最合适的回答,由SO网友:lukefivdev 2 整理而成

放慢编辑速度并仔细考虑。。。正在工作!填充顶部可补偿按钮坐得太高的趋势。

.alignleft-luke5 { width:70%; height:200px; float: left; } .alignright-luke5 { width:30%; height:200px; float: left; padding-top:0.8em; }

SO网友:WebElaine

这是一个比WordPress更纯粹的CSS问题,但是。。。

您需要使用display:block 而不是内联,因此可以添加边距;您对浮动有问题,因为“alignleft”div有60%的宽度加上1.5em的右边距,所以添加60%+40%+1.5em=超过100%。

免费咨询部门需求(桌面视图)

display:block;
float:left;
margin-top:1em; // tweak this to control the vertical position
width:30%; // also tweak
最好将“alignleft”div上的边距调整为使用%,这样您就可以计算出一个精确的%作为“free consultation”div的宽度。

还要记住,您需要解决较小屏幕的问题。即使是目前的60%/40%,也打破了手机上的“免费咨询”按钮。

如果是我,我会从头开始创建一个全新的网站,用他们选择的任何自定义设置应用他们的主题,然后手动输入内容(即不导出/导入,实际上是逐段复制和粘贴),这样你就有了一个干净的网站。

SO网友:mrben522

将与文本一起放入div中

<div class="alignleft" style="width:60%;">
<h3>Next Steps...</h3>
Please feel free to contact us for a free consultation today. We will analyze
your current online presence and let you know how we can help you with your 
business goals. Contact us today to set up your free consultation!
</div>
<div style="display:inline;width:40%;"><a 
href="http://luke5marketing.com/contact/" class="button-luke5">Free
    Consultation</a>
</div>

结束

相关推荐

将多个CSS文件合并为一个以进行优化

我有个主意。我希望它已经以某种方式得到实施。下面是一个CSS文件在页面头部的示例<link rel=\'stylesheet\' id=\'validate-engine-css-css\' href=\'https://example.net/wp-content/plugins/wysija-newsletters/css/A.validationEngine.jquery.css,qver=2.7.10.pagespeed.cf.jcn-RfgU3K.css\' type=\'text/css