如何使用css更改COMMENT_FORM字段的顺序?

时间:2015-01-31 作者:rodrigo nomada

我想有评论表显示,从上到下:1-评论表评论;2-评论表单url;3-评论表电子邮件;4-评论表作者;5-提交按钮;6-插件的订阅复选框;

根据该问题的第4条回复:https://wordpress.stackexchange.com/a/50602/66195 我能够试验这些CSS规则:

#commentform {
    display:table;
    width:100%;   
}
.comment-form-comment {
    display: table-header-group; 
}
.comment-form-author {
    display: table-footer-group;
}
但是。评论表单作者最后出现在提交按钮和订阅复选框下方,这不仅不是我所需要的,我还意识到我不知道如何对中间元素进行重新排序,这些元素将显示为表行组。有谁能指导我如何自定义注释表单中元素的顺序吗?

PS-如果更多的上下文可以帮助你引导我采用另一种方法:我希望调整并使用评论表单作为用户提交内容的表单,我会在短代码插件的帮助下将其替换为帖子内容。我发现的表单构建插件的免费版本有不同的限制,我认为Wordpress评论表单可能会保持更多的可能性,尤其是当它与其他插件组合时。

1 个回复
SO网友:Bryan Willis

如果想用css实现这一点,可以使用flexbox而不是table。Flexbox可让您轻松订购元素:

#commentform {
    display: flex;
    flex-flow: column;
}
.comment-form-comment {
    order: 1;
}
.comment-form-url {
    order: 2;
}
.comment-form-email{
    order: 3;
}
.comment-form-author{
    order: 4;
}
.form-submit{
    order: 5;
}
下面是一个示例:http://codepen.io/candid/pen/NxKJyW/

结束