首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

如何在没有表格的情况下设置样式并对齐

作者：Gbom2402851125 | 2023-08-30 10:05
如何解决《如何在没有表格的情况下设置样式并对齐》经验，为你挑选了5个好方法。

我已经习惯了用来

s完美地对齐我的表单字段.这就是我通常写我的表格的方式:





   

     
     
     
   






我知道这是不好的做法,我想使用CSS, ,,
s或清洁方法.然而,事实是,s表格的工作非常好.一切都完全正确,间距是完美的,所有错误都完全在彼此之下,等等.
我最近尝试使用
和
标记表单,但我最终还是回到表格只是因为它们看起来好多了.



如何在不使用



s的情况下获得这种对齐的表格布局？


1> Gavin Miller..：
这可能得不到很多支持,但这是我的两分钱:
在某些情况下,表格更容易布局; 比如三列或表格(尽管这里有一些很好的建议,可以做一个纯粹的css表单布局,所以不要忽略它们.)
Processes and methodologies can make good servants but are poor masters.
   - Mark Dowd, John McDonald & Justin Schuh 
     in "The Art of Software Security Assessment"

我相信这句话非常强烈地适用于这种情况.如果您的表格布局适合您,不会导致可访问性问题而且没有损坏 - 那么就不要修复它.
像"你应该","必须","永远"这样的短语 - 让我害怕,因为一个尺寸不适合所有人!带着一粒盐的狂热者.


2> Diodeus - Ja..：
是的,使用标签和CSS:





CSS:
.FBLabel, .FBInput {
    display:block;
    width:150px;
    float:left;
    margin-bottom:10px;
}

请参阅:http://www.alistapart.com/articles/prettyaccessibleforms
这可能会导致下拉菜单较长，文本区域较长或错误消息无法正确对齐 
如何在该布局中正确显示错误？ 

3> Damo..：
如果您不使用表格,则需要预先知道标签的宽度.对于多语言站点(i18n),这通常是一个问题.
使用桌子,它们可以伸展以适合不同尺寸的标签.仅靠CSS无法以良好的支持方式实现这一目标.


4> Andrew Hare..：
你为什么不想用桌子？听起来他们现在正在为你工作.您是否担心可访问性问题？仅仅因为它是一个表并不意味着可访问性会受到影响.
我想提醒你除了纯净之外别无他法地创造一个解决问题的新解决方案.即使您担心语义,究竟什么样的语义描述了一个表单？
这真的非常偏离基础:关于语义标记的全部意义在于结构*本身*是内容.没有用户输入的表单有足够的内容,每个字段都是有意义的.你有没有试过自己使用屏幕阅读器？这是一个很有启发性的体验. 
我基本上都在关注语义:)使用更好的解决方案会更优雅.表格适用于表格数据等... 

5> Mark Hurd..：
我大部分时间都使用以下方法,它允许我完全按照我喜欢的方式设置所有对齐方式.正如您所看到的,它为CSS和JS提供了大量的钩子.

	

		
		
		
	

	
	
    
		
    • 
	


有几个原因 - 更大的点击目标,并为您提供更大的间距/样式灵活性,因为您可以直接定位单个标签或其包含的输入.我保留了"for"属性,以便标记验证.     

    


    


    

        
推荐阅读

        

            
        

    


    























    


    

        

            
            

                
                    devbox
                
            


            

                Gbom2402851125            


            

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

            
            


                                
                    
                    关注作者
                            


        

    



    

        
Tags | 热门标签

        

            
        

    



    

        
RankList | 热门文章

        

            
        

    




    








    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有