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

时间：2019-05-06 14:10:01

标签： html css

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

enter image description here

我在网上发现了很多东西： Align button to input with float? Align button with input forms with labels Make form button/text field same height in all browsers?

我知道我会有很多缺点，但是我只是无法解决这个问题，我需要帮助。

我整天都在修改值，而且对如何在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；

这里是result。

感谢@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;
}

1 个答案:

答案 0 :(得分：4)

您需要做一些更改，必须将输入按钮插入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>

相关问题
最新问题