在文本输入下方对齐标签

Posted 2023-04-18

【中文标题】在文本输入下方对齐标签

【英文标题】：Aligning labels below text input

【发布时间】：2011-12-01 04:26:38

【问题描述】：

我正在尝试将表单中的标签对齐到文本输入框下方。我已经从 here 改编了我的 CSS。

它在 IE 9 中完美显示，但我在使用 firefox、chrome 等时遇到问题。

这是它在 IE 中的样子：

这就是它在 Firefox 中的样子：

它在 chrome 中看起来很糟糕，但我想先让它在 Firefox 中运行。

主要关注点是：

文本输入应在标签上方居中。 冒号应与文本输入垂直对齐。 下拉菜单应与文本输入垂直对齐。

这是我的标记：

<form action="" method="post">

    <label for="time">Time settings</label>

    <div class="description">
        Description goes here
    </div>

    <span><label for="time">Hour</label> <input type="text" id="time" name="time" maxlength="2" size="2"></span>
    <span>:</span>
    <span><label for="time-minute">Minute</label> <input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"></span>
    <span>:</span>
    <span><label for="time-seconds">Seconds</label> <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"></span>

    <span>
        <select id="time-ampm" name="time-ampm">
            <option value="am">AM</option>
            <option value="pm">PM</option>
        </select>
    </span>
    </form>

这里是 CSS 样式：

<style>
    span
        display: inline-block;
    

    span input  
        display: block; 
        position: relative; 
        top: -3em; 
        text-align: center;
     

    span label  
        display: block; 
        padding-top: 1.5em; 
        text-align: center;
     
</style>

我也在使用 html 4.01 strict doctype。

这是 jsfiddle 中的表单：http://jsfiddle.net/VuShK/

谁能告诉我如何解决这个问题？

解决方案： 感谢所有回复的人。

这是我的最终解决方案，文本输入居中。感谢 AVD 的帮助。

<style> 
    span 
        display: inline-block; 
        position: relative;
        top: -1em;
        text-align:center;
     

    span select input   
        display: block;  
        position: relative;  
        top: -3em;  
      

    span label   
        display: block;  
        position: relative;  
        top:2.7em; 
        text-align: center; 
      
</style> 

【参考方案1】：

试试这个，

<style>
    span
        display: inline-block;
    

    span select input  
        display: block; 
        position: relative; 
        top: -3em; 
     
    span input  text-align:center;
    span label  
        display: block; 
        position: relative; 
        top:3em;
        text-align: center;
     
</style>

【讨论】：

太棒了 :) 有没有办法让文本输入居中？

我刚刚尝试了您编辑的帖子，但文本输入仍然没有在 firefox 中居中。

@phpdev ：也许你可以将 span input text-align:center; 移动到

我已删除 span input 并将 text-align 移动到 span 中，因为文本输入元素是 span 的子元素。我已经用更新的样式表更新了原始帖子。

【参考方案2】：

检查一下

    <form action="" method="post">  
<table>
    <tr>
        <td colspan="4">
           <label for="time">Time settings</label> 
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <label for="Description">Description goes here</label>  
        </td>
    </tr>
    <tr>
        <td>
            <span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time">:</label></span>
        </td>
        <td>
            <span><input type="text" id="time-minute" name="time-minute" maxlength="2" size="2"><label for="time-minute">:</label></span>
        </td>
        <td>
            <span>  <input type="text" id="time-seconds" name="time-seconds" maxlength="2" size="2"><label for="time-minute">:</label></span>
        </td>
        <td>
            <span><select id="time-ampm" name="time-ampm"><option value="am">AM</option><option value="pm">PM</option></select></span>
        </td>
    </tr>
    <tr>
        <td>
            <label for="time">Hour</label>
        </td>
        <td>
            <label for="time-minute">Minute</label>
        </td>
        <td>
            <label for="time-minute">Seconds</label>
        </td>
        <td>&nbsp;</td>
    </tr>
</table>     

【参考方案3】：

    <div style="overflow:hidden;border:1px blue solid;">

    <div style="float:left;width:120px;border:1px lime solid;text-align:center;">
        <input style="width:80%;"> :
        <div style="border:1px red solid;">Hours</div>
    </div>
    <div style="float:left;width:120px;border:1px lime solid;text-align:center;">
        <input style="width:80%;"> :
        <div style="border:1px red solid;">Minutes</div>
    </div>
    <div style="float:left;width:120px;border:1px lime solid;text-align:center;">
        <input style="width:80%;"> :
        <div style="border:1px red solid;">Seconds</div>
    </div>
    <div style="float:left;width:120px;border:1px lime solid;text-align:center;">
        <select style="width:90%;"></select>
    </div>

    </div>