Question

所以我有

HTML

<div class="avatar">
<img src="$USER_AVATAR_URL$" /><a href="$LOGIN_FORM$" /></a>
</div>

我正在尝试将登录表单与图像右侧对齐。目前它低于图像。我尝试过使用text-align，但没有用。那我该怎么做呢？

CSS

.avatar { 
 float: right; 
 background: #242426; 
 width: 50px;
 height: 50px;
 border: 5px solid #242426; 
 border-radius: 50%;
 position:absolute;
 top: 60px;
 right:250px;
}

.avatar img {
 display: block; 
 width: 100%; 
 border: 0; 
 margin: 0;
 border-radius: 50%;
 float:right;
}

Answer 1

您必须仅在链接处设置float: right;，并将float: left;设置为img

修改

这样的事情：

<html> <head> <title>Test</title> <style type="text/css"> .avatar { background: #242426; width: 100px; height: 100px; border: 5px solid #242426; border-radius: 50%; position:absolute; top: 60px; right:250px; float:right; } .class_img { float:left; display: block; border: 0; margin: 0; border-radius: 50%; } </style> </head> <body> <div class="avatar"> <div class="class_img"> <img src="$USER_AVATAR_URL$" /> </div> <a href="$LOGIN_FORM$" /></a> </div> </body> </html>

Answer 2

你应该只生成一个block div和float img左边，将表格放到右边。

HTML：

<div class="avatarAndLogin">
    <div class="avatar"><img src="$USER_AVATAR_URL$" /></div>
    <div class="login"><a href="$LOGIN_FORM$">login form</a></div>
</div>

CSS：

.avatarAndLogin{    
 position:absolute;
 top: 60px;
 right:250px;    
 display: block; 
 width: 300px; // need some size here so u can float the avatar and login form inside this block
}

.avatar { 
 margin:0;
 float: left; 
 text-align: center;
 background: #242426; 
 width: 50px;
 height: 50px;
 border: 5px solid #ccc; // with light gray border just to show that it's there
 border-radius: 50%;
}

.login{  
 margin:0;
 width: 240px;  
 height: 50px;   
 float: right; 
}

编辑你想要的。我认为它的工作方式大致如你所愿。

演示： http://jsfiddle.net/goodfriend/Nnjhp/41/ - 我使用您的头像作为头像图片。

对齐<img/>标记内的文本？

2 个答案:

HTML：

CSS：