html – 设计不适用于跨度和按钮

html – 设计不适用于跨度和按钮,第1张

概述我试图沿着2个跨度对齐按钮. 2个跨度在彼此的顶部,我想在第二个跨度旁边显示按钮. 这是我的CSS: /* Styles go here */.contacts { position: absolute; top: 0; left: 70px;}.contacts .name { font-weight: 700; display: block; 我试图沿着2个跨度对齐按钮. 2个跨度在彼此的顶部,我想在第二个跨度旁边显示按钮.

这是我的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="[email protected]" 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="[email protected]" 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 – 设计不适用于跨度和按钮所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1070648.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存