HTML中的下拉列表和textarea元素_Html_Css_User Interface

HTML中的下拉列表和textarea元素

html css user-interface

HTML中的下拉列表和textarea元素,html,css,user-interface,Html,Css,User Interface,所以我最近才开始学习HTML，并练习创建一些简单的表单，其中包括一个下拉菜单，然后是一个输入区域，如textbox和textarea 我刚刚意识到，如果要在输入中容纳换行符，可以使用textarea，而常规文本框在HTML中不能这样做，因此我有以下表格：我现在面临的问题是，如果我们看“Report”行，textarea的位置有点奇怪，它导致了下一行输入的一些不必要的间隔，即ID。此外，“Report”下拉列表与后面跟着“textbox”的另一个下拉列表相比似乎不合适我能做些什么来平衡文本区

所以我最近才开始学习HTML，并练习创建一些简单的表单，其中包括一个下拉菜单，然后是一个输入区域，如textbox和textarea

我刚刚意识到，如果要在输入中容纳换行符，可以使用textarea，而常规文本框在HTML中不能这样做，因此我有以下表格：

我现在面临的问题是，如果我们看“Report”行，textarea的位置有点奇怪，它导致了下一行输入的一些不必要的间隔，即ID。此外，“Report”下拉列表与后面跟着“textbox”的另一个下拉列表相比似乎不合适

我能做些什么来平衡文本区域的间距，并像其他下拉列表一样将“Report”下拉列表与文本区域对齐

我的HTML代码如下：

<html lang = "en">
<body>
<form>
    <div class = "con1">
        <select id = "dropdown">
            <option>Name</option>
        </select>
        <input type = "text">
    </div>
    <div class = "con2">
        <select id = "dropdown">
            <option>Class</option>
        </select>
        <input type = "text">
    </div>
    <div class = "con3">
        <select id="dropdown">
            <option>Report</option>
        </select>
        <textarea id="id_in"></textarea>
    </div>
    <div class = "con4">
        <select id = "dropdown">
            <option>ID</option>
        </select>
        <input type = "text">
    </div>
</form>


名称
等级
报告
身份证件

我建议您使用Bootstrap或类似的工具，使用更简单的CSS样式更容易构建网站

这是CSS可以用来按照您想要的方式对齐所有内容的地方，请尝试设置固定或基于%的宽度。您还多次使用相同的id=“dowpdown”。我避免那样做。如果您想为多个元素提供相同的标识符，我建议您使用一个类。

在这个问题上有点困惑，但这可能是您需要开始涉及一些CSSI的地方。强烈建议大家共同努力，尽早学习现代CSS和最佳实践。零碎或更晚地学习它将导致糟糕的HTML结构，并依赖过时的方法来解决CSS中的问题。