将我的元素移到右侧？
Nik*_*ntz 4 html css css-float
我正在使用 HTML 和 CSS，我想将表单和徽标更靠右对齐：
如果我做一个模型，我想要的位置更像是这样：
我的 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>
我的CSS是
BODY {background-image: url(/welcome/static/images/reg-bg.png); background-repeat: repeat-x; }
#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
您能否建议如何将我的组件更向右对齐，如下图所示？
谢谢
更新
现在我可以将徽标向右对齐，剩下要做的就是将表单向右移动。我该怎么做？
您的 css 是正确的，但尝试将其应用于内容 div内的div：
网页：
<div id="content">
<div id="content-container">
<form ...>
...
</form>
<img id="image-logo" .../>
</div>
</div>
CSS：
#content-container {
width: 700px ;
margin: 0 auto;
}
#image-logo {
float: right;
}
此外，图像需要正确浮动才能按照您的预期定位。
| 归档时间： |
|
| 查看次数： |
60242 次 |
| 最近记录： |