html - 将单行中的表单与文本区域对齐并删除调整大小功能？

Question

可能重复：
一行中有多个选择选项

我有以下代码，但它在单独的行上生成它，我希望它在一行上（仅填充未显示的父级）。

另外，如何删除文本区域的调整大小功能？

<div id="search" align="left" style="width:100% height="100%">
<select>
    <option>Beers</option>
    <option>Cigars</option>
    <option>Wines</option>
</select>
    <div align="right">
        <form>
            <textarea style=width:"100%" height="100%" cols="0" "rows="0"></textarea>
        </form>
    </div>
</div>

Answer 1

给你：http: //jsfiddle.net/XeVdN/2或见下文：

<div id="search" style="float:left; width:100%; height=100%;">
<select stryle="float:left;">
    <option>Beers</option>
    <option>Cigars</option>
    <option>Wines</option>
</select>
    <div style="float:right;">
        <form>
            <textarea style="width:100%; height=100%; resize:none;" cols="0" "rows="0"></textarea>
        </form>
    </div>
</div>​

您的样式（一些流氓“符号）有一些问题，我已经清理了这些问题，并且为了让它们对齐，您只需将第一个元素向左浮动，第二个元素向右浮动。

出于学习目的，无论何时使用 style 属性，都不需要将每个单独的参数括在引号中，只需将整体语句括起来，并在每个样式后面加上 ; 如上面的示例代码所示。

Answer 2

你想用float. 删除该align属性并使用style="float:left;andstyle="float:right;另一个。

您当前的style属性也不正确，请参见下面的示例：

HTML：

<div id="search">
  <select>
    <option>Beers</option>
    <option>Cigars</option>
    <option>Wines</option>
  </select>
  <div id="other">
   <form>
     <textarea></textarea>
   </form>
  </div>
</div>​

CSS：

#search {
    width:50%;
    float:left;
}
#other {
    width:50%;
    float:right;
}
/*** This is what removes the textarea resize ***/
textarea {
    resize:none;
}

​这里的工作示例：http: //jsfiddle.net/gN6Fz/