Перемещение моих элементов вправо? - PullRequest
Новая
       3

Перемещение моих элементов вправо?

3 голосов
/ 07 февраля 2012

Я работаю с HTML и CSS и хочу выровнять форму и логотип по правому краю:

enter image description here

Позиции, которые я хочу, больше похожи на это, еслиЯ делаю макет: enter image description here

Мой 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 ;
}

Не могли бы вы посоветовать, как лучше совместить мои компоненты спрямо как на нижнем рисунке?

Спасибо

Обновление

Теперь я могу выровнять логотип вправо, все, что нужно сделать, это переместить форму вправо.Как мне это сделать?

enter image description here

Ответы [ 6 ]

2 голосов
/ 07 февраля 2012

Ваш css прав, но попробуйте применить его к div внутри div содержимого:

Html: 

<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;
}

Кроме того, изображение нуждается в плавающем вправо положении, как вы ожидаете.

2 голосов
/ 07 февраля 2012

Добавьте style="float:right" к вашему изображению.

присвойте стиль margin-left:10px; например вашей форме

2 голосов
/ 07 февраля 2012

Самый простой способ - использовать float и / или margin. Вы можете правильно расположить элементы с помощью float, float:right;. Также посмотрите на поля, например: margin-left:100px;

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

или css. 

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

CSS: 

.img{
float:right;
}
1 голос
/ 16 февраля 2018

float: прямо на элемент, который вы хотите переместить вправо на том же уровне

1 голос
/ 07 февраля 2012

Вы можете попробовать это: 

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

Вы должны указать правильное количество пикселей.

1 голос
/ 07 февраля 2012

Вы можете обернуть форму в div и стилизовать div с соответствующим левым полем. Вы также можете попытаться выровнять изображение вправо, а не влево.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...