Padding not 0 on float:right
I'm trying to make an image go ALL the way right on a DIV but it's not happening:\
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti开发者_高级运维onal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>* { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:5px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;"><a href="#">@Testing</a><br /><a href="?wipe=1">Logout</a></div>
<div style="clear:both;"></div></div>
</body>
</html>
Try that on say... http://htmledit.squarefree.com/ that and you'll see red is still visible on the right-hand side of the border when it should float all the way right.
<div style="float:right,margin-right:5px;">
margin-right:5px
Take off the margin-right:5px; on your inner DIV around the image.
<div style="float:right;">
Well the float has "margin-right:5px;" in its style attribute. That's causing a 5-pixel margin on the right... if you remove that, it will go all the way to the right.
You asked to make the image go all the way to the right on a div, but you didn't say which div. The img is already all the way to the right on its immediate parent, but that div is 5 pixels from the right of its parent ("login").
Setting the margin to 0 inside your image div gets the image all the way over.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>body { margin:0;padding:0; }
#login {
background:red;
width:200px;
xpadding:5px;
}
#login a, #login a:visited {
color:blue;
text-decoration:none;
font:12px verdana;
}
</style>
<title>Untitled 1</title>
</head>
<body>
<div id="login"><div style="float:right;margin-right:0px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
<div style="float:right;color:red;text-align:right;"><a href="#">@Testing</a><br /><a href="?wipe=1">Logout</a></div>
<div style="clear:both;"></div></div>
</body>
</html>
Do like that:
<div id="login"><div style="float:right;padding-left:10px;"><img src="https://si0.twimg.com/sticky/default_profile_images/default_profile_0_normal.png" /> </div>
加载中,请稍侯......
精彩评论