民工Vessel 2021-11-18 15:27 采纳率: 100%
浏览 65
已结题

在学习html css js,在编写html静态的页面中遇到了问题,需要帮助

img


想把这几个输入框放在中上方,而且把扫描更新都横过来,尝试过dir但是没效果,不知道该怎么操作了,代码如下:


<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript" src="script/bootstrap.js"></script>
    <script type="text/javascript" src="script/bootstrap.min.js"></script>
    <script type="text/javascript" src="script/npm.js"></script>

    <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <style>
       img{
           display: block;
       }
        body {
            margin: 2%, 20%;
            border: 2px;
            height: 800px;
        }
        body,html,span{
         
            margin:0;
                border:0;
                padding:0;
                font-family: Tahoma, Geneva, sans-serif;
                font-style:normal;
        }
        table{
            height: 100px;
            width: 100px;
            margin-top: 10%;
        }
    </style>
</head>

<body
    style="background-image: url('image/loginbg.jpg');background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
    <div
        style="height:300px; text-align: center;width: 200px;padding-top: 25%;padding-right: 25%;padding-bottom: 25%;padding-left: 25%;margin: 25% 25%;">
        <!---- <h1 style="background-color: bisque;text-align: center;">登陆界面</h1>-->
        <table style="margin-top: 20%;margin-left: 1px;">
        <tr>
            <td>
                <!----  <input type="text" class="caption">
                  <input type="text" class="pre">-->
                <input type="text"placeholder="请扫入工位、设备"   style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
                font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px;  " >
                <!--<button type="button"class="pre code" >扫描</button>-->
            </td>
            <td><span class="blockquote" dir="ltr" >扫描</span></td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="请扫入工牌号"class="" style="background-color:rgb(0, 162, 255);z-index:-10;padding-left:45px;border:10px;
                font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
            </td>
            <td><span  >扫描</span></td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="请输入服务器" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
                font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px;  ">
            </td>
            <td>
                <span dir="ltr" >更新</span>
            </td>
        </tr>
        </table>
    </div>
</body>

</html>
  • 写回答

3条回答 默认 最新

  • 雾里桃花 2021-11-18 15:43
    关注
    
    <!doctype html>
    <html>
     
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script type="text/javascript" src="script/bootstrap.js"></script>
        <script type="text/javascript" src="script/bootstrap.min.js"></script>
        <script type="text/javascript" src="script/npm.js"></script>
     
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <style>
           img{
               display: block;
           }
            body {
                margin: 2%, 20%;
                border: 2px;
                height: 800px;
            }
            body,html,span{
             
                margin:0;
                    border:0;
                    padding:0;
                    font-family: Tahoma, Geneva, sans-serif;
                    font-style:normal;
            }
            table{
                height: 100px;
                width: 100px;
                margin-top: 10%;
            }
        </style>
    </head>
     
    <body
        style="background-image: url('image/loginbg.jpg');background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
        <div
            style="height:300px; text-align: center;position: absolute;top: 25%;left: 50%;transform: translateX(-50%);">
            <!---- <h1 style="background-color: bisque;text-align: center;">登陆界面</h1>-->
            <table style="margin-top: 20%;margin-left: 1px;">
            <tr>
                <td>
                    <!----  <input type="text" class="caption">
                      <input type="text" class="pre">-->
                    <input type="text"placeholder="请扫入工位、设备"   style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
                    font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px;  " >
                    <!--<button type="button"class="pre code" >扫描</button>-->
                </td>
                <td><span class="blockquote" dir="ltr" style='white-space: nowrap;'>扫描</span></td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="请扫入工牌号"class="" style="background-color:rgb(0, 162, 255);z-index:-10;padding-left:45px;border:10px;
                    font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px; ">
                </td>
                <td><span  class='ltr' style='white-space: nowrap;'>扫描</span></td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="请输入服务器" style="background-color:rgb(0, 162, 255);-index:-10;padding-left:45px;border:5px;
                    font-size:24px;height: 30px;border-radius: 10px;margin-left: 10px;  ">
                </td>
                <td>
                    <span dir="ltr" style='white-space: nowrap;'>更新</span>
                </td>
            </tr>
            </table>
        </div>
    </body>
     
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 11月26日
  • 已采纳回答 11月18日
  • 创建了问题 11月18日

悬赏问题

  • ¥15 metadata提取的PDF元数据,如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd
  • ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
  • ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)
  • ¥15 Windows11, backspace, enter, space键失灵