讓我輸入元素右對齊

然後單擊新主題，你會看到text型3個input元素，用戶名右邊，密碼和標題，分別。我希望這些元素在它們的直接父項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內的中心位置，是唯一能夠垂直擴展。可能？

來源

2014-04-17 user3537336

您可以通過將「float」屬性設置爲「right」來完成此操作。

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

關於textarea，我不確定你的意思。如果您在您的textarea的右邊談論保證金不足的，你可以改變你的CSS到這一點：

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

箱上漿部分說，你想要的寬度是包括margin和padding。（換句話說，不超過100％）。然後，您可以安全地添加5px的邊距右側，這與剩餘邊距的金額相同。該邊距減去總寬度，使其居中父元素。

來源

2014-04-17 18:46:57

只是一個簡單的浮動權應該工作。

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

來源

2014-04-17 18:43:13 VtoCorleone

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

來源

2014-04-17 18:44:34

只需添加float:right到他們，會做的伎倆......

或者，你可以與周圍的<span>標籤，並添加一個width它 - 這樣他們就也可以對齊，但不是對齊，但對齊

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

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

來源

2014-04-17 18:45:31 dima

試試這個：

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/

來源

2014-04-17 18:52:42 JCBiggar

讓我輸入元素右對齊

回答

相關問題