Question

我在html和css中遇到了麻烦。我创建了一个div，想要在其左侧放置一个徽标图像，在其右侧放置一个按钮链接，但是顽固的css坚持让它移动到单独的线上，我使用float：left和float：right。

Answer 1

<div>
    <img src="https://www.gravatar.com/avatar/c5b9fb1230ea2fe0dc96151cba3098d5?s=32&d=identicon&r=PG&f=1" style='float: left' />
    <button>Link</button>
</div>

Answer 2

你的意思是这样的吗？

在你的img和按钮上放一个div并将宽度设置为100％。然后float您的图片和按钮。我更新了小麦的小提琴： fiddle

Answer 3

Your CSS

#box
{
width:100%;
}


#logo
{
float:left;
width:50%;
/*padding and Margin according to your need*/
}



#buttons

{

float:right;
width:50%;
}




Your HTML

<div id ="box">

   <div id ="logo">
         /*your img file here */
</div>


<div id="buttons">
/* Your links/buutons */

</div>`enter code here`

Answer 4

你可以做的一件事就是你创建了一个表格，将你的徽标放在行的第一个单元格中，下一个单元格可以添加你的链接，之后你可以设置浮动/边距到你想要的位置。希望有所帮助

Answer 5

你必须使用“浮动属性”。如果没有它，所有浏览器都无法正常工作，那么你也会遇到浏览器问题。这样做，这样可以正常工作。

Check this fiddle

img
{
float:left;
width:100px;
}
button
{
float:right;
width:100px;
}

元素在<div> </div>中的定位

5 个答案: