这是我的CSS:
/* Styles go here */.contacts { position: absolute; top: 0; left: 70px;}.contacts .name { Font-weight: 700; display: block;}li { position: relative; margin-bottom: 30px;}
<!DOCTYPE HTML><HTML> <head> <link data-require="bootstrap-CSS@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.CSS" /> <link rel="stylesheet" href="style.CSS" /> <script src="script.Js"></script> </head> <body> <ul> <li> <div > <span >short name</span> <span >City</span> <button >Contact</button> </div> </li> <li> <div > <span >very long name will be here</span> <span >city</span> <button >Contact</button> </div> </li> <li> <div > <span >another long name will be here too</span> <span >city</span> <button >Contact</button> </div> </li> </ul> </body> </HTML>
如何将按钮对齐在一起并且在名称太长时不要移动,是否可以在没有引导程序的情况下完成?
谢谢你提出任何暗示.
解决方法 只需从按钮中删除右拉类./* Styles go here */.contacts { position: absolute; top: 0; left: 70px;}.contacts .name { Font-weight: 700; display: block;}li { position: relative; margin-bottom: 30px;}
<!DOCTYPE HTML><HTML> <head> <link data-require="bootstrap-CSS@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.CSS" /> <link rel="stylesheet" href="style.CSS" /> <script src="script.Js"></script> </head> <body> <ul> <li> <div > <span >short name</span> <span >City</span> <button >Contact</button> </div> </li> <li> <div > <span >very long name will be here</span> <span >city</span> <button >Contact</button> </div> </li> <li> <div > <span >another long name will be here too</span> <span >city</span> <button >Contact</button> </div> </li> </ul> </body></HTML>总结
以上是内存溢出为你收集整理的html – 设计不适用于跨度和按钮全部内容,希望文章能够帮你解决html – 设计不适用于跨度和按钮所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)