为什么我的按钮不能设置50%的宽度并在每一侧分开?

#center {
  position: absolute;
  top:35%;
  text-align: center;
  z-index:100;
}

#add_form {
  margin:0 auto;
  width:90%;
  /*height:20em;*/
  background-color: #f0f0f0;
  position: relative;
}

#add_form p {
  font-size: 1em;
  padding-top:25px;
  padding-right:25px;
  padding-left:25px;
  text-align: left;
}

#userID {
  width:80%;
  height:2em;
  margin-top:0px;
  margin-bottom:5px;
  border-radius: 5px;
  border:1px #D3D3D3 solid;
  font-size: 1.5em;
  padding-left:10px;
  letter-spacing: 2px;
  text-align: center;
}

#submitGetCancel, #submitGetCheck {
  width:50%;
  height:3em;
  background-color: red;
  color: #740000;
  font-size: 1em;
  border-style: none;
}
<div id="center"> 
<div id="add_form">
          <p>Some String</p>
          <input type="text" id="userID" name="userID">
          <!-- <br/> -->
          <div id="buttons">
            <button type="button" id="submitGetCancel" onclick="closeForm();">Cancel</button>
            <button type="button" id="submitGetCheck">confirm</button>
          </div>
      </div>
  
  </div>

我想要的是将每个按钮的宽度设置为50%,以便将它们放置在每侧。

问题出在哪儿?

阿克沙伊

您可以使用 float:left

#center {
  position: absolute;
  top:35%;
  text-align: center;
  z-index:100;
}

#add_form {
  margin:0 auto;
  width:90%;
  /*height:20em;*/
  background-color: #f0f0f0;
  position: relative;
}

#add_form p {
  font-size: 1em;
  padding-top:25px;
  padding-right:25px;
  padding-left:25px;
  text-align: left;
}

#userID {
  width:80%;
  height:2em;
  margin-top:0px;
  margin-bottom:5px;
  border-radius: 5px;
  border:1px #D3D3D3 solid;
  font-size: 1.5em;
  padding-left:10px;
  letter-spacing: 2px;
  text-align: center;
}

#submitGetCancel, #submitGetCheck {
  float:left;
  width:50%;
  height:3em;
  background-color: red;
  padding:0;
  color: #740000;
  font-size: 1em;
  border-style: none;
}
<div id="center"> 
<div id="add_form">
          <p>Some String</p>
          <input type="text" id="userID" name="userID">
          <!-- <br/> -->
          <div id="buttons">
            <button type="button" id="submitGetCancel" onclick="closeForm();">Cancel</button>
            <button type="button" id="submitGetCheck">confirm</button>
          </div>
      </div>
  
  </div>

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么我不能在一侧放置平行四边形中的文本

我如何从屏幕 pygame 的每一侧产生敌人?

为什么 WinMerge 隐藏了我的大部分文件,即使我从一侧或另一侧复制了所有更改?

为什么乘法只在一侧短路

为什么我不能让按钮的高度等于它们的宽度?

当我在发件人一侧关闭时,为什么仍会慌张地“在关闭的通道上发送”?

为什么在一对多(1-N)总是主键一侧放在N侧的关系中,我们反之亦然呢?

使按钮的一侧从中间弯曲

为什么我不能将按钮位置设置在同一行并相互绑定?

为什么我不能在颤动按钮栏中增加我的按钮宽度?

为什么不能减小按钮的宽度?

如何在平面的一侧设置纹理,在另一侧设置颜色?

无法在一侧设置边框半径,而在另一侧设置常规边框

为什么我不能改变乌龟的宽度?

CSS将箭头放在Box(div)的每一侧

Photoshop 脚本从文档的每一侧裁剪 x 像素

如何将图像放置在页眉的每一侧?

使项目浮动到导航栏中的每一侧

网格间隙仅更新一侧的宽度

100% 宽度的项目只有一侧

绝对100%宽度div溢出一侧

为什么我不能更改我的可变数量并在 js 中设置它?

无法设置项目一侧到另一侧的LinearLayout

CSS布局:一侧滚动,另一侧设置高度

当背景透明时,一侧的弯曲边框仍然在另一侧显示细线,仅在移动设备中-为什么会发生这种情况?

为什么我不能在“ |”处分开 在clojure

为什么我不能制作分开的表副本?

我试图让文本从网站的一侧滑到另一侧然后消失

在带有伸缩功能的flexbox的包装盒的每一侧,我如何才能有4个“托盘”?