我有一个通用表单,我想设置它的样式以对齐标签和输入字段. 由于某些原因,当我为标签 Select 器指定宽度时,没有任何react :

HTML:

<form id="report-upload-form" method="POST" action="" enctype="multipart/form-data">
    <p>
        <label for="id_title">Title:</label> 
        <input id="id_title" type="text" class="input-text" name="title"></p>
    <p>
        <label for="id_description">Description:</label> 
        <textarea id="id_description" rows="10" cols="40" name="description"></textarea></p>
    <p>
        <label for="id_report">Upload Report:</label> 
        <input id="id_report" type="file" class="input-file" name="report">
    </p>
</form>

CSS:

#report-upload-form {
    background-color: #316091;
    color: #ddeff1;
    font-weight:bold;
    margin: 23px auto 0 auto;
    border-radius:10px;
    width: 650px;
    box-shadow:  0 0 2px 2px #d9d9d9;
}

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
}

#report-upload-form input[type=text], 
#report-upload-form input[type=file],
#report-upload-form textarea {
    width: 305px;
}

输出:

在此处输入图像描述

jsFiddle

我做错了什么?

推荐答案

执行display: inline-block:

#report-upload-form label {
    padding-left:26px;
    width:125px;
    text-transform: uppercase;
    display:inline-block
}

http://jsfiddle.net/aqMN4/

Html相关问答推荐

HTML CSS如何使用图像作为中心点将元素置于中心

从网络抓取中提取文本

如何获得一个背景图像,不是模糊的内部容器,但模糊的外部'

放大缩小标题在外面的图像

需要帮助实现悬停动画效果

页脚与主要内容重叠

是否可以部分列出一个HTML有序列表

在单独的容器之间堆叠上下文

需要帮助创建一个简单的html css网格布局

如何在排序上重用参数?

尽管div高度为100%,div中的内容仍会溢出

禁用所有行,但在16角中单击编辑按钮的行除外

柔性盒内的物品;t覆盖整个宽度,即使设置为100%

带圆角帽的 CSS 部分边框

实验的响应式屏幕尺寸

水平对齐两列中的两个按钮 同一级别

Bootstrap 5 英雄

使用模板循环每行列出 3 个 bootstrap 卡

如何将 img 元素定位到特定位置?

所有幻灯片上的 Quarto RevealJS 标题