Html 将我的元素向右移动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9176442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving my elements to the right?
提问by Niklas
I'm working with HTML and CSS and I want to align the form and the logo more to the right:
我正在使用 HTML 和 CSS，并且希望将表单和徽标更靠右对齐：
The positions I want are more like this if I do a mockup:
如果我做模型，我想要的位置更像这样：
My HTML is
我的 HTML 是
<!DOCTYPE hml>
<html>
<head> <link rel="stylesheet" href="/welcome/static/css/register.css"/>
<STYLE TYPE="text/css">
</STYLE>
<title>{% trans %}Register new distributor{% endtrans %}</title>
</head>
<body> <div id="content">
<form action="{{action}}" method="post"><img src="/welcome/static/images/reg-reg.gif">
<table><tr><td>
<label>Pers. number </label></td><td><input type="text" name="soc_sec" placeholder="{% trans %}Your social security number{% endtrans %}" />({% trans %}YYMMDDXX{% endtrans %})</td></tr><tr><td>
<label for="start">Sponsor ID</label></td><td>
<input type="text" id="start" name="Log1" size="3" maxlength="3" />
<input type="text" name="Log2" size="3" maxlength="3" />
<input type="text" name="Log3" size="3" maxlength="3" />
<input type="text" name="Log4" size="3" maxlength="3" />(<a href="/sponsor-id-info.html">{% trans %}What is a sponsor ID{% endtrans %}?</a>)</td><td></tr><tr><td>
<label>Email</label></td><td> <input type="text" name="email" placeholder="{% trans %}Your email{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}First name{% endtrans %}</label></td><td><input type="text" name="firstname" placeholder="{% trans %}Your first name{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}Last name{% endtrans %}</label></td><td><input type="text" name="lastname" placeholder="{% trans %}Your last name{% endtrans %}" /></td></tr><tr>
<td>
<label>{% trans %}Address{% endtrans %}</label></td><td><input type="text" name="address" placeholder="{% trans %}Your address{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}Zip code{% endtrans %}</label></td><td><input type="text" name="zipcode" placeholder="{% trans %}Your zip code{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}City{% endtrans %}</label></td><td><input type="text" name="city" placeholder="{% trans %}City{% endtrans %}" /></td></tr><tr><td>
<label>{% trans %}Phone{% endtrans %}</label></td><td><input type="text" name="phone" placeholder="{% trans %}Your phone number{% endtrans %}" /></td></tr></table>
<button>{% trans %}Next{% endtrans %}</button>
</form><img src="/welcome/static/images/snabbreg002.jpg"></div>
</html>
And my CSS is
我的 CSS 是
BODY {background-image: url(/welcome/static/images/reg-bg.png); background-repeat: repeat-x; }
#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
Could you advice how to align my components more to the right like in the lower picture?
你能建议如何像下图那样将我的组件更向右对齐吗？
Thank you
谢谢
Update
更新
Now I could align the logo to the right, all that is left to be done is moving the form to the right. How do I do it?
现在我可以将徽标向右对齐，剩下要做的就是将表单向右移动。我该怎么做？
回答by falsarella
Your css is right, but try to apply it to a div insidethe content div:
您的 css 是正确的，但尝试将其应用于内容 div内的 div：
Html:
网址：
<div id="content">
<div id="content-container">
<form ...>
...
</form>
<img id="image-logo" .../>
</div>
</div>
Css:
css：
#content-container {
width: 700px ;
margin: 0 auto;
}
#image-logo {
float: right;
}
Also, the image needs a right floating to position as you expect.
此外，图像需要按预期正确浮动。
回答by Stig Hausberg
The easiest way is probably using float and/or margin.
You can right position your elements with float, float:right;.
Also have a look at margin, example : margin-left:100px;
最简单的方法可能是使用浮动和/或保证金。您可以使用 float, 正确定位您的元素float:right;。也看看保证金，例如：margin-left:100px;
<img src="/welcome/static/images/snabbreg002.jpg" style="float:right;">
Or with css.
或者用css。
<img src="/welcome/static/images/snabbreg002.jpg" class="img">
css:
css：
.img{
float:right;
}
回答by Hadas
Add style="float:right"to your image.
添加style="float:right"到您的图像。
give the style margin-left:10px;for example to your form
margin-left:10px;例如，将样式赋予您的表单
回答by GeekMasher
You could try this:
你可以试试这个：
#content {
position: absolute;
margin-left: 600px;
top: 400px;
}
You have to put the right pixels count in.
您必须输入正确的像素数。
回答by Akash Yellappa
float:right on the element you want to be moved to the right on the same level
float:right 在您要在同一级别上向右移动的元素上
回答by Pedro Rolo
You may wrap the form in a div and style the div with the appropriate left margin. You may also try to align the image to the right instead of the left.
您可以将表单包装在 div 中并使用适当的左边距设置 div 的样式。您也可以尝试将图像向右对齐而不是向左对齐。
