Padding not 0 on float:right_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-14 16:27 出处：网络

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/

相关专题：css

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>

Padding not 0 on float:right