搜索
搜索

如何将两个按钮与其各自的表单输入对齐？

bleah1 发表于 Dev
29
bleah1

试图弄清楚如何将某些按钮与某些输入字段对齐，这很棘手。我不知道。

在此处输入图片说明

我在网上发现了很多东西：将按钮对准浮点输入？ 使按钮与带有标签的输入表单对齐 使表单按钮/文本字段在所有浏览器中具有相同的高度？

我知道我会遇到很多弊端，但是我只是无法解决这个问题，我需要帮助。

我整天都在修改值，而且对如何在CSS中放置内容一无所知。我听不懂

.big-box {
  position: absolute;
  width: 60%;
  top: 40%;
  left: 50%;
  text-align: left;
  transform: translate(-50%, -50%);
  text-align: center;
}

.box-head {
  width: 100%;
  display: grid;
  border-bottom: 6px solid red;
  margin-bottom: 50px;
  margin-top: 40px;
  text-align: center;
}

.textbox {
  display: block;
  float: left;
  width: 75%;
  overflow: hidden;
  font-size: 20px;
  padding: 5px 0;
  margin: 10px 0;
  border-bottom: 1px solid red;
}

.textbox input {
  border: none;
  outline: none;
  background: none;
  color: white;
  font-size: 18px;
  width: 97%;
  float: left;
  margin: 5px 5px;
}

#button {
  display: grid;
  width: 25%;
  background: none;
  border: 2px solid red;
  color: white;
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
}
<div id="logo"><img url="logo.png"></div>
<div class="big-box">
  <div class="box-head">
    <div class="title">
      <h1>Configuration Page</h1>
    </div>
  </div>
  <form method="post" action="/url" onSubmit="return saveValue();">
    <div class="textbox">
      <input type="url" placeholder="Enter URL" name="getURL" value="">
    </div>
    <input id="button" type="submit" value="Enter">
    <div class="textbox">
      <input type="number" placeholder="Brightness" name="getBrightness" value="">
    </div>
    <input id="button" type="submit" value="Enter">
  </form>
</div>

编辑：这就是我解决的方法：

  • 我从类改为ID：#textbox;

  • 我已经把#textbox和#button里面的div：#box-box;

  • 我已经添加display: flex;到#box-box和display: grid;这两个#textbox和#button。

  • 添加margin-left: 25px;到#button；

这是结果。

感谢@Flavio Caruso的启发。

<body>
    <div id = "logo"><img url="logo.png"></div>
    <div class = "big-box">
        <div class = "box-head">
            <div class = "title"><h1>Configuration Page</h1></div>
        </div>
        <form method="post" action="/url">
            <div id="box-box">
                <div id = "textbox" >
                    <input type="url" placeholder="Enter URL" name="getURL" value="">
                </div>
                <input id ="button" type="submit" value="Enter">
            </div>
            <div id="box-box">
                <div id = "textbox" >
                    <input type="url" placeholder="Enter URL" name="getURL" value="">
                </div>
                <input id ="button" type="submit" value="Enter">
            </div>
            <div id="box-box">
                <div id = "textbox" >
                    <input type="url" placeholder="Enter URL" name="getURL" value="">
                </div>
                <input id ="button" type="submit" value="Enter">
            </div>
        </form>
    </div>
</body>

#logo {
    width: 94%;
    height: 50px;
    background: url(logo.png) left no-repeat;
    background-size:contain;
    margin: 30px auto;
}

**#box-box {
    display:flex;
}**

#textbox {
    **display: grid;**
    width: 70%;    
    overflow: hidden;
    font-size: 20px;
    padding 10px 0;
    margin: 10px 0;
    border-bottom: 1px solid red;
}

#textbox input {
    border: none;
    outline: none;
    background: none;
    color: white;
    font-size: 18px;
    width: 97%;
    float: left;
    margin: 5px 5px;
}

#button {
    **display: grid;**
    width: 25%;
    background: none;
    border: 2px solid red;    
    color: white;
    padding: 5px;
    font-size: 18px;
    cursor: pointer;
    margin: 10px 0;
    **margin-left: 25px;**
    margin-top: 30px;
}
Flavio Caruso

您需要做一些更改，必须将输入按钮插入div类“文本框”内并添加display：flex，然后将css从按钮调整为内联块并向右浮动。像那样：

.big-box {    
    position: absolute;
    width: 60%;
    top: 40%;
    left: 50%;
    text-align: left;
    transform: translate(-50%, -50%);
    text-align: center;
}

.box-head {    
    width: 100%;   
    display: grid;
    border-bottom: 6px solid red;
    margin-bottom: 50px;
    margin-top: 40px;
    text-align: center;
}

.textbox {
    display: flex;
    float: left;
    width: 75%;
    overflow: hidden;
    font-size: 20px;
    padding: 5px 0;
    margin: 10px 0;
    border-bottom: 1px solid red;
}

.textbox input {
    border: none;
    outline: none;
    background: none;
    color: white;
    font-size: 18px;
    width: 97%;
    margin: 5px 5px;
}

#button {
    display: inline-block;
    float: right;
    width: 25%;
    background: none;
    border: 2px solid red;    
    color: white;
    padding: 5px;
    font-size: 18px;
    cursor: pointer; 
}
<body>
    <div id = "logo"><img url="logo.png"></div>
    <div class = "big-box">
        <div class = "box-head">
            <div class = "title"><h1>Configuration Page</h1></div>
        </div>
        
        <form method="post" action="/url" onSubmit="return saveValue();">
            <div class = "textbox" >
                <input type="url" placeholder="Enter URL" name="getURL" value="">
            
            <input id ="button" type="submit" value="Enter">
            </div>
            <div class = "textbox" >
                <input type="number" placeholder="Brightness" name="getBrightness" value="">
                <input id ="button" type="submit" value="Enter"> 
            </div>
        </form>
    </div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将旋转的xticklabel与其各自的xticks对齐

如何将两个按钮与UIView的中心等距对齐

如何将两个fock基础与其索引连接？

如何将中间的两个按钮与html中的特定边距对齐

Angular 2-将两个按钮的DOM元素传递给各自的功能

对齐两个表单和其他按钮

如何将两个单选按钮的值相加？

选中两个输入各自的行复选框后，如何启用和禁用两个输入

如何将按钮的输入值添加到jQuery中的两个不同的输入字段中

如何将两个div对齐

在XML中，如何将两个元素（或小部件）与相对布局右对齐？

如何将两个div彼此对齐？

如何将两个表单中的输入框移到更近的位置？

将两个表单彼此对齐

如何将两个连续的输入分配给两个不同的变量？

如何将两个按钮的值添加到单个输入框？

引导程序将选择与按钮和两个输入字段对齐

在两个输入元素下方将两个并排的输入元素水平对齐

将两个按钮对齐到行的中心

如何将两个单选按钮的输入分配给单个字段？

如何使用 flexbox 将两个按钮与 'position:absolute' 的 div 的中心对齐？

如何将两个 div 对齐？

如何将图标与两个按钮垂直对齐？

如何将数据从一个输入字段提供给 Django 生成表单的两个输入字段？

如何将两个相邻的 div 对齐而不发生冲突？

如何将两个按钮彼此对齐？

如何将两个单独输入的值传递到 Django 表单的内容字段中？

USWDS - 如何将表单标签与输入的左侧对齐？

如何将两个按钮和视图从左到中心、从中心到右对齐

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档