Fatal编程技术网
  • html/
  • Html 将我的元素移到右边？

Html 将我的元素移到右边？

html css

Html 将我的元素移到右边？,html,css,css-float,Html,Css,Css Float,我正在使用HTML和CSS，我希望将表单和徽标更向右对齐： 如果我做模型，我想要的位置更像这样： 我的HTML是 <!DOCTYPE hml> <html> <head> <link rel="stylesheet" href="/welcome/static/css/register.css"/>

我正在使用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>
你能给我一些建议，如何使我的部件更向右对齐，如下图所示吗

多谢各位

更新 现在我可以将徽标向右对齐，剩下要做的就是将表单向右移动。我该怎么做

最简单的方法可能是使用浮动和/或边距。 您可以使用float对元素进行正确定位，
float:right。
还可以查看边距，例如：
marginleft:100px


<img src="/welcome/static/images/snabbreg002.jpg" style="float:right;">


将
style=“float:right”
添加到图像中


给出样式
左边距：10px例如，您的表单
您可以将表单包装在div中，并使用适当的左边距设置div的样式。
您也可以尝试将图像向右对齐，而不是向左对齐
 您可以尝试以下方法：


#content {
    position: absolute;
    margin-left: 600px;
    top: 400px;
}



您必须将正确的像素计数放入。
您的css是正确的，但请尝试将其应用到内容div中的div中：

Html:


此外，图像需要右浮动才能按预期定位。
浮动：在要移动到同一级别的元素上向右移动。
添加浮动：在要使其向右移动的元素上向右移动感谢您的评论。我可以将徽标向右移动，现在我只想将窗体向右对齐，但更像是将其居中。同时将浮动：向右移动窗体并调整窗体的宽度，它将立即打开。谢谢您的回答。我可以设法将徽标与右侧对齐。现在我想把表格移到右边，但不想移到徽标的位置。我已经用细节更新了这个问题。@Nickrosenscrantz，注意我的回答，它说要在div内容中创建一个div内容容器，并将css应用到div内容容器。非常感谢@falsarella我现在可以用divs控制组件了。谢谢。我可以修复图像。我现在只需要移动表格。我已经用更新更新了原始问题。只需在div中加上一个左边距：在css
#content{margin left:200px；}
谢谢。我需要的就是这个。我已经用结果更新了问题。现在我还想把形状向右移动一点，比如居中或者类似的东西。怎样才能做到呢？

<img src="/welcome/static/images/snabbreg002.jpg" class="img">



.img{
float:right;
}



#content {
    position: absolute;
    margin-left: 600px;
    top: 400px;
}



<div id="content">
  <div id="content-container">
    <form ...>
      ...
    </form>
    <img id="image-logo" .../>
  </div>
</div>



#content-container {
  width: 700px ;
  margin: 0  auto;
}
#image-logo {
  float: right;
}