0

所以我有

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;
}
4

2 回答 2

0

您必须float: right;在链接和float: left;img处设置 only

编辑

像这样的东西：

<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>
于 2013-05-23T06:35:16.870 回答
0

你应该只做一个blockdiv 和左边的表格和右边的表格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/ - 我用你的头像作为头像。

于 2013-05-23T09:02:46.000 回答