javascript - 在不使用表格的情况下将所有文本放在链接的右侧

Question

我试图让下面 html 中的每个链接都位于文本(段落元素)的左侧。所以我试图在同一行上获取链接和文本。

如何让所有文本都位于超链接的右侧？

<div>
    <div style="float: left; display: inline; background-color: blue;"><a href="aboutUs.pdf">About Us</a></div>
    <p style="float: left; display: inline; background-color: yellow;">: Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div>
    <div style="float: left; display: inline; background-color: blue;"><a href="aboutUs.pdf">About Us</a></div>
    <p style="float: left; display: inline; background-color: yellow;">: Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

Answer 1

你不能 float display: inline。

<div>
    <a href="aboutUs.pdf">About Us</a>
    <p>: Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet, elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

​div {height:125px;}
​a{height:100%; display:block; float:left; 
    background: lightblue;}
p{height:100%; background:light gray;}

Demo