如何放置适合整个页面的按钮？

ptb 发表于 Dev

铂

我有以下代码，当我在按钮类中放置 width: 33.3% 时，按钮适合其当前宽度的 33.3% 而不是整个页面。

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style>
.btn-group{
    display: flex;
    position: absolute;    
    top: 50%;
    justify-content: center;
    width: 100%;
}

.button{
   background-color: #008080;
   /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}

.button:hover {
    background-color:#75a3a3;
}

</style>

</head>

<body>
<div class="btn-group">
      <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
      <form action="#" method="post"><button class="button" type="submit">Button 2</button></form> 
      <form action="#" method="post"> <button class="button"type="submit">Button 3</button></form> 
</div>


</body>

如何放置适合整个页面的按钮？中间有 0 个边距。谢谢！！

蚁穴

如果我正确理解您的问题，也许这会有所帮助。

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <style>
    .btn-group {
      display: flex;
      position: absolute;
      top: 50%;
      justify-content: center;
      width: 100%;
    }
    
    .btn-group>form {
      flex-grow: 1;
    }
    
    .button {
      width: 100%;
      background-color: #008080;
      /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    
    .button:hover {
      background-color: #75a3a3;
    }
  </style>

</head>

<body>
  <div class="btn-group">
    <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
    <form action="#" method="post"><button class="button" type="submit">Button 2</button></form>
    <form action="#" method="post"> <button class="button" type="submit">Button 3</button></form>
  </div>


</body>

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

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

编辑于 2021-08-8

我来说两句

0 条评论

登录后参与评论

如何切换整个页面的深色主题？

如何在Angular中更改整个页面的背景颜色

如何放置适合整个页面的按钮？

如何放置适合整个页面的按钮？

计算数据帧R中的字符串频率

Android Studio Kotlin：提取为常量

Excel 2016图表将增长与4个参数进行比较

获取并汇总所有关联的数据

如何使用Redux-Toolkit重置Redux Store

http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

将加号/减号添加到jQuery菜单

算术中的c ++常量类型转换

TYPO3：将 Formhandler 添加到新闻扩展

TreeMap中的自定义排序

如何开始为Ubuntu开发

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

无法使用 envoy 访问 .ssh/config

在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

遍历元素数组以每X秒在浏览器上显示

在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

未捕获的SyntaxError：带有Ajax帖子的意外令牌u

如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

尝试在Dell XPS13 9360上安装Windows 7时出错

如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称