如何让表格横向排列
你的问题是关于让表格横向排列，而不是让表格向右移动。为了解决这个问题，你可以使用CSS中的 float 属性。
水平排列表格
要在水平方向排列表格，请将以下CSS添加到的表格中：
table { float: left;}
这将使表格水平排列在页面上。
向右移动新生成的表格
要向右移动新生成的表格，请使用 margin-left 属性。将以下CSS添加到新生成的表格中：
.box { margin-right: 840px;}
这将使新生成的表格向右移动 840px。
解决其他问题
此外，你提到了其他两个问题：
在下标“∨”位置改变。这似乎是 CSS 或 JavaScript 中的一个问题。请检查你的代码是否存在任何错误或冲突。下标“∨”和其他元素在点击后被遮挡。这可以通过调整元素的位置和大小来解决。你可以使用 position、 top、 left、 width 和 height 属性。
完整代码
以下是一个结合上述解决方案的完整代码：
Daily report generator * { margin: 0; padding: 0; } .box { float: right; margin-right: 840px; margin-top: 200px; width: 10px; position: absolute; } .title { background: linear-gradient(#141e30); } table { height: 200px; width: 200px; font-size: 12px; text-align: center; float: left; margin: 10px; font-family: arial; } .dash_border { font-family: Arial; font-size: 1px; line-height: 1px; font-weight: bold; color: pink; padding: 0.1px; border: 0.1px dashed #FF5722; background: linear-gradient(to top, #ccc, 10px, transparent 1px), linear-gradient(to right, ccc, 10px, transparent 1px), linear-gradient(to bottom, ccc, 10px, transparent 1px), linear-gradient(to left, ccc, 10px, transparent 1px); background-origin: border-box; } .button_sty { /*确定*/ float: right; margin-right: -780px; position: relative; top: 120px; margin-top: -200px; font-size: 13px; background: -webkit-linear-gradient(left, #03e9f4, transparent); color: #03e9f4; } .add_sty { /*∨*/ float: right; margin-right: 515px; font-size: 20px; top: 12px; position: relative; height: 28px; width: 30px; margin-top: -380px; } /*----------------------------------输入框----------------------------------------*/ a { text-decoration: none; } input { background: transparent; border: 0; outline: none; } .loginBox { width: 400px; height: 364px; background-color: #00000060; margin: auto; border-radius: 10px; box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .6); padding: 40px; box-sizing: border-box; float: auto; position: absolute; } h2 { text-align: center; color: aliceblue; margin-bottom: 30px; font-family: 'Courier New', Courier, monospace; } .item { height: 45px; border-bottom: 1px solid #fff; margin-bottom: 40px; position: relative; } .item input { width: 100%; height: 100%; color: #fff; padding-top: 20px; box-sizing: border-box; } .item input:focus + label, .item input:valid + label { top: 0px; font-size: 2px; } .item label { position: absolute; left: 0; top: 12px; transition: all 0.5s linear; } .btn { padding: 10px 20px; margin-top: 30px; color: #03e9f4; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 2px; left: 35%; } .btn:hover { border-radius: 5px; color: #fff; background: #03e9f4; box-shadow: 0 0 5px 0 #03e9f4, 0 0 25px 0 #03e9f4, 0 0 50px 0 #03e9f4, 0 0 100px 0 #03e9f4; transition: all 1s linear; } .btn > span { position: absolute; } .btn > span:nth-child(1) { width: 100%; height: 2px; background: -webkit-linear-gradient(left, transparent, #03e9f4); left: -100%; top: 0px; animation: line1 1s linear infinite; } @keyframes line1 { 50%, 100% { left: 100%; } } .btn > span:nth-child(2) { width: 2px; height: 100%; background: -webkit-linear-gradient(top, transparent, #03e9f4); right: 0px; top: -100%; animation: line2 1s 0.25s linear infinite; } @keyframes line2 { 50%, 100% { top: 100%; } } .btn > span:nth-child(3) { width: 100%; height: 2px; background: -webkit-linear-gradient(left, #03e9f4, transparent); left: 100%; bottom: 0px; animation: line3 1s 0.75s linear infinite; } @keyframes line3 { 50%, 100% { left: -100%; } } .btn > span:nth-child(4) { width: 2px; height: 100%; background: -webkit-linear-gradient(top, transparent, #03e9f4); left: 0px; top: 100%; animation: line4 1s 1s linear infinite; } @keyframes line4 { 50%, 100% { top: -100%; } } body { height: 100vh; background: linear-gradient(#141e30, #243b55); display: flex; justify-content: center;
以上就是如何将表格水平排列并向右移动？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1557647.html
微信扫一扫 
支付宝扫一扫 
