Question

我想将文本对齐到左侧，将输入框对齐到右侧。

这就是我的网站的样子，这应该是这样的：[图片移除]

但是，我在div标签中使用div标签做了我想要的事情，所以，如果我给它背景颜色，它就是这样的：

问题是，在绿色之后（灰色方面）我想回应错误。但由于绿色区域的div宽度，我不能这样做。输入框下出现错误。所以，我想知道我怎么能像我在图片中那样展示形式，但同时也能在右侧显示错误。

因此，脚本调用javascript插件（http://jqueryvalidation.org）。此插件在输入框之后立即添加错误，当它看到问题时。这就是为什么我无法将错误放在另一个div标签中的原因。

错误将出现在此类中：＆＃34; label.error＆＃34;。如果有办法让这个班级“不要关心固定宽度＆＃34;在css。那会有用。

Answer 1

基本上你要做的是创建一个容器<div />元素并在其中放入2个<div />元素。既然你没有提供任何代码，我只能给你一个例子：

#container {
    width: 512px;
    height: 506px;
    border: 3px solid green;
}
#left {
    float: left;
    width: 250px;
    height: 500px;
    border: 3px solid red;
    display: block;
}
#right {
    float: left;
    width: 250px;
    height: 500px;
    border: 3px solid blue;
    display: block;
}

<div id="container">
    <div id="left">
        Form here
    </div>
    <div id="right">
        Errors here
    </div>
</div>

Answer 2

这是一个UI / UX问题，令人惊讶的是我没有提到使用带有div的表格时感到震惊。

因为您的图片已被删除，我无法真正比较用户界面，但要使其成为左侧文本和右侧文本框的简单答案，请参见下文。（JS只是为了展示它是如何工作的）

function updateText(){
var txtStrng=document.getElementById("txtTextbox1").value;
document.getElementById("lblText").innerHTML=txtStrng;

}

<form action="" >
<table width="100%" height="71" border="0">
  <tr>
    <td width="45%"><div align="left"><label id="lblText">Test</label></div></td>
    <td width="55%"><div align="right">
      <input type="text" name="txtTextbox1" id="txtTextbox1" value="Test" onkeyup="updateText();" />
    </div></td>
  </tr>
</table>
</form>

文本和输入框在表单中对齐

2 个答案: