20赞

如何排列HTML输入元素？

作者：牛尾巴2010 | 2023-09-04 12:58

如何解决《如何排列HTML输入元素？》经验，为你挑选了2个好方法。

我希望找到一个资源来排列HTML页面中的输入元素.我发现即使使用宽度样式属性也很难将选择元素和文本框设置为相同的宽度,并且在浏览器中更难以实现.最后,文件输入似乎无法达到相同宽度的跨浏览器.是否有任何好的指南或提示来完成这个？也许我应该设置一些默认的CSS属性.

1> cowgod..：

我在Internet Explorer 7,Firefox 3和Safari/Google Chrome中对此进行了测试.我肯定看到了.我的研究结果表明,如果你设置相同宽度的所有输入,那么输入宽5个像素,那么在主流浏览器中您将获得非常好的(尽管不是完美的)对齐.唯一不同的是Safari /谷歌浏览器,它似乎比所有其他浏览器宽1或2个像素.

就这一点而言,你在那里的造型方面没有太大的灵活性.如果JavaScript是您的选项,您可以实现quirksmode上显示的方法,以更好地控制文件上载控件的样式.

请参阅下面的XHTML 1.0 Strict中的完整工作示例,了解具有一致输入宽度的典型表单.请注意,这不使用其他人指出的100%宽度技巧,因为它具有相同的宽度不一致的问题.此外,没有用于呈现表单的表,因为表只应用于表格数据而不是布局.






  Example Form
  



  
    
      User Profile
      First Name
      
      


      Last Name
      
      


      Favorite Language
      
      


      Biography


        

2> Ron Savage..：
我通常把它们放在我想要的宽度的div或table单元格(恐怖!我知道)中,然后设置select和input样式:width到100%,这样它们就可以填充它们所在的div/cell.

        
好主意!表格是使表格看起来很好的唯一可靠方法......



    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        iOS9:canOpenURL为WhatApp的url方案返回false
                    

                    
                                                
                            
                        
                                                
                        如何解决《iOS9:canOpenURL为WhatApp的url方案返回false》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在构建意图时,"这个"是指什么
                    

                    
                                                
                        如何解决《在构建意图时,"这个"是指什么》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如果两者都有position:absolute,那么元素及其子元素的左值和顶值是什么？
                    

                    
                                                
                        如何解决《如果两者都有position:absolute,那么元素及其子元素的左值和顶值是什么？》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        垂直对齐图像和文本在表中
                    

                    
                                                
                        如何解决《垂直对齐图像和文本在表中》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        NestedScrollView在Recyclerview调整大小时滚动到顶部
                    

                    
                                                
                        如何解决《NestedScrollView在Recyclerview调整大小时滚动到顶部》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Caffe可以扩展到多个CPU核心吗？
                    

                    
                                                
                        如何解决《Caffe可以扩展到多个CPU核心吗？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        java.lang.OutOfMemoryError GC开销限制超过了Java堆空间？
                    

                    
                                                
                        如何解决《java.lang.OutOfMemoryErrorGC开销限制超过了Java堆空间？》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        仅在php,mysql中显示前50个字符
                    

                    
                                                
                        如何解决《仅在php,mysql中显示前50个字符》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何将.caf文件转换为.mp3文件？
                    

                    
                                                
                        如何解决《如何将.caf文件转换为.mp3文件？》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Clojure  - 处理内存不足的大文件
                    

                    
                                                
                        如何解决《Clojure-处理内存不足的大文件》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        不能使用jsplumb与第二个功能
                    

                    
                                                
                        如何解决《不能使用jsplumb与第二个功能》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        设置locationpicker.jquery.js的当前用户位置
                    

                    
                                                
                        如何解决《设置locationpicker.jquery.js的当前用户位置》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何将日期值插入表中
                    

                    
                                                
                        如何解决《如何将日期值插入表中》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        退出并返回QML的返回码
                    

                    
                                                
                        如何解决《退出并返回QML的返回码》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用RAML处理Mule流中的多种安全方案的最佳方法是什么？
                    

                    
                                                
                            
                        
                                                
                        如何解决《使用RAML处理Mule流中的多种安全方案的最佳方法是什么？》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        laravel querybuilder如何在其中使用函数
                    

                    
                                                
                        如何解决《laravelquerybuilder如何在其中使用函数》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何使用自动增量字符创建自定义列
                    

                    
                                                
                        如何解决《如何使用自动增量字符创建自定义列》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在擦除 - 删除习语中使用UnaryPredicate的否定
                    

                    
                                                
                        如何解决《在擦除-删除习语中使用UnaryPredicate的否定》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用select元素从datatable导出数据会从select元素导出每个选项
                    

                    
                                                
                        如何解决《使用select元素从datatable导出数据会从select元素导出每个选项》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        理解"cat proc/net/udp"
                    

                    
                                                
                        如何解决《理解"catproc/net/udp"》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                

            
        
    

    
        吐了个 "CAO" !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
























    

    
        
            
            
                
                    
                
            

            
                牛尾巴2010            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1表之间的多对多关系 - 如何在SQL中建模
                
                                
                    2升级到php-7后"调用未定义的函数mysql_connect()"
                
                                
                    3将现有Watchkit应用程序更新为WatchOS2
                
                                
                    4SQL Server外键,引用表
                
                                
                    5Android:布局动画,如Inshorts新闻应用
                
                                
                    6单击使用react-native时如何更改图像和文本颜色？
                
                                
                    7如何在android中删除Recyclerview项目之间的分隔符
                
                                
                    8D3:如何使用新数据刷新图表？
                
                                
                    9为什么strstr（）搜索空字符串总是返回true？
                
                                
                    10矩形下的CSS三角形
                
                                
                    11Java正则表达式的特殊字符
                
                                
                    12从移动应用程序中的PCI-DSS开始？
                
                                
                    13如何强制PHP / Apache再使用一年？
                
                                
                    14iOS  - 使用Autolayout为UILabel设置最大宽度
                
                                
                    15Visual Studio 2015 Update 1 xaml设计器未显示UWP
                
                                
                    16如何在spring boot中使用应用程序上下文获取bean
                
                                
                    17如何获取jquery datepicker的当前活动实例
                
                                
                    18C#Anti-Debug方法OutputDebugString无法正常工作
                
                                
                    19缺少"使用严格",即使它已经在文件顶部声明
                
                                
                    20AngularJs:ng-如果反应太迟了