Question

如果您点击此链接

然后点击新主题，您会在用户名，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中居中，并且只能垂直展开。可能的？

Answer 1

只需一个简单的浮动权即可。

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

Answer 2

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

Answer 3

只需向他们添加float:right就可以了！

或者，您可以使用<span>包围标签并向其添加width - 这样它们也会对齐，而不是右对齐，但是对齐

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

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

Answer 4

您可以将“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;
}

框尺寸部分表示您希望宽度包括边距和填充。（换句话说，不超过100％）。然后，您可以安全地添加5px的边距权限，这与剩余边距的数量相同。从总宽度中减去此边距，使其在父元素中居中。

Answer 5

试试这个：

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

让我的输入元素右对齐

5 个答案: