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

为什么要使用内联样式？

div > div{float: left; background-color: blue;}
div > p{background-color: yellow;}

<div>
    <div><a href="aboutUs.pdf">About Us</a></div>
    <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>
    <div><a href="aboutUs.pdf">About Us</a></div>
    <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>

http://jsfiddle.net/fCaFW/

编辑：

http://jsfiddle.net/fCaFW/1/

Answer 2

您不能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

将所有文本放在链接右侧而不使用表格

2 个答案: