猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

如何对齐取消按钮，使其与变化的表格大小同步？

实际上，我有一个表，表中的行数动态增加/减少。所以我想适当地放置我的提交按钮。请指教。这就是我正在尝试的：在我的 servlet 中，我试图包含它：


 "input[type=button] {"+

                     "position:absolute;"+

                     "transition: .5s ease;"+

                     "top: 80%;"+

                      "left: 75%;"+

                      "font-size: 22px;"+ 

                      "font-weight: bold;"+

                      "font-family: ariel;"+ 

                      "background-color: #ffedca;"+

                      "}"+

但如果我的表中有 2 或 3 行，这很好用。但如果我有超过 3 行，输出将是：


            1   CPA1        Validating      release                

            2   CPA2        Validating      release

            3   CPA3        Validating      release  cancel  ok

            4   CPA4        Validating      release

在上面的输出中，取消和确定按钮只有 3 行。


ibeautiful
浏览 156回答 2
2回答

心有法竹

我喜欢Flex Box，你可以在类似的结构中工作<body>&nbsp; <div class="form">&nbsp; &nbsp; <input>&nbsp; &nbsp; &nbsp; ...some input fields&nbsp; &nbsp; </input>&nbsp; &nbsp; <button>My Submit</button>&nbsp; </div><body>&nbsp;然后你的CSS.form{&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; align-items: center;&nbsp; justify-content: center;}这将使 .form div 中的所有子项在 .form 中垂直和水平居中，而无需指定填充或边距
0

红颜莎娜

我想我有点晚了，但你可以通过以下方式做到这一点：tr{&nbsp; &nbsp; &nbsp; height: 10px;&nbsp; &nbsp; &nbsp; width:100px;&nbsp; &nbsp; }&nbsp; &nbsp; table{&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; }&nbsp; &nbsp; table, tr, td {&nbsp; &nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; }&nbsp; &nbsp; .container{&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; }&nbsp; &nbsp; .tableContainer{&nbsp; &nbsp; &nbsp; &nbsp; width:80%;&nbsp; &nbsp; }&nbsp; &nbsp; .submitContainer{&nbsp; &nbsp; &nbsp; &nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; align-items: center;&nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;&nbsp; &nbsp; &nbsp; &nbsp; width:20%;&nbsp; &nbsp; }<div class="container">&nbsp; &nbsp; <div class='tableContainer'>&nbsp; &nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class='submitContainer'>&nbsp; &nbsp; &nbsp; &nbsp; <button>CLick me </button>&nbsp; &nbsp; </div></div>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Java