Question

我正在从编辑器中将html注入我的网站。我怎样才能继承＆＃39;来自像这样的子元素的对齐：

<li>
  <div align="right">one</div>
</li>

问题是子弹是左对齐而文本是正确的，我想在这种情况下得到div上设置的对齐＆＃39;对＆＃39;。这可能有所不同，因为它来自html编辑器。

的CSS：

 ul, ol, li {
list-style: disc !important;
}

的jsfiddle：http://jsfiddle.net/bfu20zhq/

Answer 1

如果你想要相同的对齐方式，只需添加＆＃34; list-style-position：inside;＆＃34;到你的css like this fiddle.

li 
{
list-style: disc;
list-style-position: inside;
}

Answer 2

根据this无法选择父级，MDN最近没有任何暗示这种情况发生了变化。

但是，如相关帖子所示，这可以通过javascript实现（并且必须是，因为css还不能这样做）。您可以通过遍历DOM树并查找具有父div的所有li元素，然后使其align属性相同来实现此目的：

// create the filter for the tree walker

var div_filter = {
    acceptNode: function (node) {
        if ( node.tagName == 'DIV' && node.parentElement.tagName == 'LI' ) {

             return NodeFilter.FILTER_ACCEPT;

        }
    }
};

// create the tree walker so we can
// find all the divs

var treeWalker = document.createTreeWalker( document.body, 
                                            NodeFilter.SHOW_ELEMENT, 
                                            div_filter, 
                                            false);


// walk the DOM tree for the nodes we want
// and make the `li` elements have the same `align` as the `div`s
while (treeWalker.nextNode()) {
    console.log(treeWalker.currentNode);
    treeWalker.currentNode.parentElement.setAttribute('align', 
                                    /* fetch the div's align attribute */
                                    treeWalker.currentNode.getAttribute('align') );
}

不幸的是，虽然这正确地设置了align属性，但它没有提供所需的结果，正如您在this fiddle中看到的那样。 我要离开这里，因为我们需要完整的解决方案。

在列表元素上设置float: right会产生影响，但效果很糟糕。

经过一些调整后，我发现将inside添加到list-style并相应地将text-align调整为right或left，可以获得所需的结果：

如果div有align = "right"

，这就是我们想要的

li {
    list-style: disc inside;
    text-align: right;
}

我们还需要将div更改为display: inline-block，这样它们就不会像非文字元素一样：

li > div {
    display: inline-block;
}

如果您想垂直对齐项目符号，则需要为div提供明确的width，例如width: 30%或类似内容。

因此我们的while循环更改为：

while (treeWalker.nextNode()) {
    console.log(treeWalker.currentNode);
    treeWalker.currentNode.parentElement.style.textAlign = 
                 treeWalker.currentNode.getAttribute('align');
}

这是complete fiddle。

匹配列表项目符号与`<div>`</div>中文本的对齐方式

2 个答案: