Question

所以这个片段的意图是允许左边的段落显示一个跨越父容器高度的右边框，它设置在display：table下，如果设置了所述规则，则表示容器文章和段落。跟随它的ul意味着放在它上面，它也正在工作。优选地允许列表实体浮动，使得多于一个子弹可以在一条线上。

现在，当float：left被添加到li标签时... para文本从其单元格中的顶部开始，到最后一行项目符号条目的下方开始。

我知道浮动：左边是问题，因为删除它可以解决问题，但是它会使列表1子弹/线...我不想这样做。

为什么li标签的浮动重新定位项目上的文本不会被写入影响？我尝试检查元素，但是我没有看到任何文本对齐方式被计算出来。

HTML：

<article class="foo" id="bar">
        <p> List on right causes my text to move down?</p>

<ul>
    <li>why</li>
    <li>yes</li>
    <li>we</li>
    <li>do!</li>
    <li>why</li>
    <li>yes</li>
    <li>we</li>
    <li>do!</li>
</ul>

CSS：

.foo {
    display:table;
    width: 20em;
}
.foo p {
    text-align: right;
    padding: 0 1em 0 0;
    border-right: 1px solid #999;
    display: table-cell;
    width: 10em;
}

#bar ul
{
    width: 10em;
}
#bar li {
    float: left;
    width:2em;
    margin-right:3em;
}

可以在此处看到JSFiddle代码段：http://jsfiddle.net/U39ab/1/

Answer 1

更改

float:left;

到

display:inline;

JSFiddle

回答2

将float:left;保留在#bar li

中

但是.foo p应该有

vertical-align:top;

在其属性中。

然后您可以将填充更改为:(可选）

padding: 20px 1em 0 0;

将其与其余部分对齐。

JSFiddle 2

Answer 2

只需在

中添加position:absolute即可

#bar ul
{
    width: 10em;
    position:absolute
}

DEMO

或BeatAlex's answer

检查显示：内联CSS display: inline vs inline-block

左侧Para文本强制从Right li浮动到底部？

2 个答案: