Html 左段文字强制从右下浮动？

因此，此代码段的目的是允许左侧的段落显示跨越父容器高度的右边框，如果设置了所述规则，它将在“显示：表格”下为容器文章和段落同时显示右边框。它后面的ul就是要放在它的右边，这也在起作用。最好允许列表实体浮动，以便一行上可以有多个项目符号

现在，当float:left添加到li标记时。。。段落文本从单元格的顶部开始，到最后一行项目符号条目的下方开始

我知道浮动：左是问题所在，因为删除它可以纠正问题，但它会使列表中的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>

可以在这里看到JSFIDLE代码片段：

Change

float:left;

到

答案2

保持<代码>浮动：左在

#bar li

但是

.foop

应该有

vertical-align:top;

就其性质而言

然后可以将填充改为：（可选）

使其与其余部分对齐

---

只需在中添加

位置：绝对

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


或

选中display:inline here
您想要的确切结构？？它是
float:left在
li
元素上。您是否尝试对
标记使用
display:inline
？如果同样的事情发生。。。尝试将
display:block
放在段落中；解决了我遇到的主要问题，但显然引入了另一个问题。删除了要点。假设我可以通过使用：before选择器并在该点添加自定义项目符号来纠正它。好吧，这肯定是解决它的第二种方法！垂直对齐，这是您在JSFIDLE上使用的，而不是文本对齐。。。这似乎不起作用。谢谢我忘了，你能在这里标出不止一个答案作为解决方案吗？我已经有一段时间没用了，所以。。。我知道，我应该感到羞耻。哈哈，我希望这能有所帮助！没有哈哈，你只能接受一个人。不过，请随意接受@SajadLfc，因为我得到了2票，而他只得到了1票。这不是它的工作方式，而是哦，好吧！：-）我的意思是垂直对齐：顶部我只是在更新答案时写错了：/@codexcdhm。。。这个版本中没有子弹。仍然很好奇为什么缺少“position:absolute”或“display:inline”会导致这里的格式问题。在我安装的四个浏览器中似乎也是一致的。非常感谢！这让我烦了好一阵子。
vertical-align:top;

padding: 20px 1em 0 0;

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