当前位置: 首页 > 面试题库 >

在输入旁边的表格中对齐标签

吴英武
2023-03-14
问题内容

我有一个非常基本和已知的表单方案,需要正确对齐输入旁边的标签。但是我不知道该怎么做。

我的目标是使标签在右侧输入旁边对齐。这是期望结果的图片示例。

在此处输入图片说明

为方便起见,我做了一个小提琴,以澄清我现在所拥有的-http://jsfiddle.net/WX58z/

片段:

<div class="block">

    <label>Simple label</label>

    <input type="text" />

</div>

<div class="block">

    <label>Label with more text</label>

    <input type="text" />

</div>

<div class="block">

    <label>Short</label>

    <input type="text" />

</div>

问题答案:

一种可能的解决方案:

  • 给标签display: inline-block;
  • 给他们一个固定的宽度
  • 将文字向右对齐
    那是:

    label {

    display: inline-block;

    width: 140px;

    text-align: right;

    }​

    <label>Simple label</label>
    
    <input type="text" />
    
    <label>Label with more text</label>
    
    <input type="text" />
    
    <label>Short</label>
    
    <input type="text" />
    


 类似资料:
  • 问题内容: 我需要一个在其右边具有较大笔触的h2。像这样: 我正在努力以最佳的响应方式来完成它。更不用说它在自定义WP主题中,因此我不想创建大量的页面标记,以使客户端立即中断:) 问题答案: 您需要一个元素和一个伪元素。PS它反应灵敏。 说明:在这里,主要部分是在元素上使用,然后使用带有属性的伪元素创建虚拟元素,并将其放置在设置为的父元素上。

  • 问题内容: 为什么不行?但是, 确实 可以。 问题答案: 实际上,在这种情况下,这非常简单:对图像应用垂直对齐。由于所有内容都在同一行中,因此它实际上是要对齐的图像,而不是文本。 在FF3中测试。 现在,您可以将flexbox用于这种类型的布局。

  • 问题内容: 我是HTML的新手,正在尝试学习如何使用表单。 到目前为止,我最大的问题是对齐表格。这是我当前的HTML文件的示例: 问题在于,“电子邮件”后的字段框与名字和姓氏相比在空格方面有很大不同。使其真正“排队”的“正确”方法是什么? 我正在尝试练习良好的格式和语法…很多人可能不确定使用CSS来做到这一点,到目前为止,我仅了解HTML的基本知识。 问题答案: 另一个使用CSS的示例,我只是将表

  • 我试图创建一个网页的主横幅旁边的图像标题。我尝试做的一个示例可以在下面找到:https://optimaninja.com/ 我正在使用bootstrap,下面是一些我必须开始的简单初学者代码: 引导代码: 谢谢你的帮助。

  • 我需要生成一个报告,其中页面的左半部分包含标题数据(两次),页面的右半部分包含详细记录。 我了解到,这些带总是跨越页面的整个宽度,所以很明显,我无法将标题带的大小调整到页面宽度的一半。 将报告设置为2列似乎没有帮助,因为它只允许我将详细记录拆分为列。 我还需要标题显示两次,但这可能是另一个问题的主题。 第一次使用JasperSoft Studio完成JasperReport newbie。

  • 我正在使用一个材质用户界面来创建一个输入和一个带有降档的预输入选择器类型组件的标签。 我看了演示,得到了这个: 我的inputProps等于: 我的前任在材料 UI 输入标签组件上定义了这些Props 属性,但是为了让由属性标记的咏叹调工作,我使用了单个 。 打印出输入和标签道具的内容提供: 我的问题是没有向DOM呈现标签。我得到的最接近的是一个带有label属性的div,它包装输入,但不显示任何