Получение моего элемента ввода для выравнивания по правому краю

Question

Получение моего элемента ввода для выравнивания по правому краю

0

Если вы нажмете эту ссылку

а затем нажмите кнопку Создать тему, вы увидите 3 input элементы типа text, справа от пользователя, пароля и названия, соответственно. Я хотел бы, чтобы эти элементы были выровнены по правому краю в их ближайшем родительском div (поле с серым фоном) или какой-то другой способ сделать их согласованными друг с другом. Мне не нравится, когда они укладываются прямо на текст влево. Я пробовал несколько методов выполнения указанной задачи, и никто из них не работал.

Здесь соответствующий код:

div.boardbox
{
    background-color: #ccc;
    margin: 20px;
    width: 50%;
    padding: 5px;
    border: 3px solid #00325f;
}

div.hidden
{
    display: none;
}

input.threadipt
{
    width: 300px;
    margin-left: auto;
    margin-right: 0px;
}

textarea#newthreadtxt
{
  height: 400px; 
  width: 100%;
  margin: 0px;
}

button.threadbutton
{
    width: 100px;
    background-color: #DF0101;
}

а также

    <button onclick="$('#newthreaddiv').removeClass('hidden');">New Thread</button>
    <div class="boardbox hidden" id="newthreaddiv">
        <form id="newthreadform">
            <p>Username: <input class="threadipt" type="text"/></p>
            <p>Password: <input class="threadipt" type="text"/></p>
            <p>Title: <input class="threadipt" type="text"/></p>
            <p>Content:</p>
            <textarea id="newthreadtxt"></textarea>
            <button onlick="phpfunction">Create Thread</button>
        </form>
    </div>

Кроме того, я хотел бы, чтобы элемент textarea был центрирован внутри div и мог только расширяться вертикально. Возможное?

user3537336 17 апр. 2014, в 20:46

Источник

Теги:

javascript

jquery

html

css

5 ответов

0

#newthreadform > p { position: relative; }
input.threadipt { position: absolute; right: 0; }

Rodney Golpe 17 апр. 2014, в 17:13

0

Попробуй это:

CSS

div.boardbox
{
    background-color: #ccc;
    margin: 20px;
    width: 50%;
    padding: 5px;
    border: 3px solid #00325f;
}

div.hidden
{
    display: none;
}

input.threadipt
{
    width: 300px;
    margin-left: auto;
    float:right;
    margin-right: 0px;
}

textarea#newthreadtxt
{
  height: 400px; 
  width: 100%;
  margin: 0px;
}

#newthreadform p span /* ADDED CSS */
 {
   min-width:90px;
   display:block;
   float:left;
 }

button.threadbutton
{
    width: 80px;
    background-color: #DF0101;
}

HTML

<button onclick="$('#newthreaddiv').removeClass('hidden');">New Thread</button>
    <div class="boardbox hidden" id="newthreaddiv">
        <form id="newthreadform">
          <p><span>Username:</span> <input class="threadipt" type="text"/></p>
          <p><span>Password:</span> <input class="threadipt" type="text"/></p>
          <p><span>Title:</span> <input class="threadipt" type="text"/></p>
          <p><span>Content:</span></p>
          <textarea id="newthreadtxt"></textarea>
          <button onlick="phpfunction">Create Thread</button>
        </form>
    </div>

СМОТРИТЕ ДЕМО ЗДЕСЬ: http://jsfiddle.net/hPj7S/

JCBiggar 17 апр. 2014, в 16:53

0

Просто простое плавающее право должно работать.

<div>
    <label>UserName:</label>
    <input type="text" style="float:right">
</div>

Также подумайте о правильном выравнивании текста против ввода.

<div>
    <label style="width:100px; display: inline-block; text-align:right">UserName:</label>
    <input type="text">
</div>

VtoCorleone 17 апр. 2014, в 16:38

0

просто добавьте float:right к ним, и это сделает трюк...

альтернативно, вы можете окружать метки с помощью <span> и добавлять к ней width - таким образом, они будут выровнены также, а не вправо, но выровнены

<p><span>Username:</span> <input class="threadipt" type="text"/></p>

p span {
  width:200px;
  display:inline-block;
}

dima 17 апр. 2014, в 16:01

Ещё вопросы

Frank Houweling · Accepted Answer · 2014-04-17T16-47-00.000Z

Вы можете сделать это, установив атрибут "float" в "right".

input.threadipt
{
    width: 300px;
    margin-left: auto;
    margin-right: 0px;
    float:right;
}

Что касается текстового поля, я не уверен, что вы имеете в виду. Если вы говорите о недостатке поля справа от своего текстового поля, вы можете изменить свой CSS следующим образом:

textarea#newthreadtxt
{
    height: 400px; 
    width: 100%;
    margin: 0px;
    box-sizing: border-box;
    margin-right: 5px;
}

В разделе размера коробки указано, что вы хотите, чтобы ширина включала маржу и отступы. (другими словами, не более 100%). Затем вы можете безопасно добавить margin-right от 5px, что составляет ту же сумму, что и маржа. Этот запас вычитается из общей ширины, делая его центрированным в родительском элементе.