html – 如何在表单上布局文本和输入以适合特定宽度(对齐)？_html-js-css

概述我有一个表单,我试图使一行“对齐”,所以整行(这是一个4个文本框和标签),以适应精确的像素宽度(比如800px).通常情况下,如果我只是在没有任何特殊的CSS的情况下进行布局,那么它不到800px.我想把它“拉伸”到800px.我不在乎是否必须拉伸文本框或它们之间的空格. 这与MS word中的合理布局类似,如果这有助于描述我正在寻找的内容.这是否可以在表单布局中的html / css中进行？您我有一个表单,我试图使一行“对齐”,所以整行(这是一个4个文本框和标签),以适应精确的像素宽度(比如800px).通常情况下,如果我只是在没有任何特殊的CSS的情况下进行布局,那么它不到800px.我想把它“拉伸”到800px.我不在乎是否必须拉伸文本框或它们之间的空格.

这与MS word中的合理布局类似,如果这有助于描述我正在寻找的内容.这是否可以在表单布局中的HTML / CSS中进行？

解决方法您基本上需要 text-align-last: justify,它指定块元素中“最后一行文本”的对齐方式,默认为标准方向,保留在LTR中.

<!DOCTYPE HTML><HTML lang="en">    <head>        <Title>SO question 15994654</Title>        <style>            #fIElds {                wIDth: 1000px;                border: 1px solID gray;            }            .justifIEd {                text-align-last: justify;            }        </style>    </head>    <body>        <p ID="fIElds" >            <label for="input1">label1</label>            <input ID="input1" />            <label for="input2">label2</label>            <input ID="input2" />            <label for="input3">label3</label>            <input ID="input3" />            <label for="input4">label4</label>            <input ID="input4" />        <p>    </body></HTML>

这适用于IE和firefox(对于较旧的firefox版本,如有必要,请添加-moz-text-align-last：justify),但这在基于Webkit的浏览器(Chrome / Safari)中失败.为了覆盖这些浏览器,您需要将以下内容替换为.justifIEd,以便最后一行不再显示为“最后一行”,因此text-align：justify可以通常的方式完成其工作：

.justifIEd {    text-align: justify;}.justifIEd:after {    content: '';    display: inline-block;    wIDth: 100%;}

请注意,text-align-last：justify以这种方式变得多余.

这是jsfiddle demo.

总结

以上是内存溢出为你收集整理的html – 如何在表单上布局文本和输入以适合特定宽度(对齐)？全部内容，希望文章能够帮你解决html – 如何在表单上布局文本和输入以适合特定宽度(对齐)？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/1085913.html

html – 如何在表单上布局文本和输入以适合特定宽度(对齐)？

发表评论

评论列表（0条）