为啥我的按钮与列中的弹性框内联?

Posted

技术标签:

【中文标题】为啥我的按钮与列中的弹性框内联?【英文标题】:Why my button is inline with a flex box in a column?为什么我的按钮与列中的弹性框内联? 【发布时间】:2021-08-20 06:35:53 【问题描述】:

我的按钮与弹性框对齐, 元素应该在中相互堆叠,对吗?

我正在做一个计时器,所以有一行,其中有两列。

一列有一个图片,另一列有一个标题,一个flexbox(包含四个矩形),和一个按钮

现在,我希望我的按钮位于计时器下方,但它与它一致。

HTML

    <!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stiks</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
</head>


<body>


                <div class="container hero">
  <div class="row">
    <div class="portal col-md-12 col-lg-5">
      <img class="img-fluid" src="../assets/download (10).jpg">
    </div>

    <div class="col-md-12 col-lg-7 align-self-center">

      <h2><b>Timer</b></h2>

      <div class="d-inline-flex flex-nowrap">
        <div class="rect">
          <span class="days"></span>
          <p>Days</p>
        </div>

        <div class="rect">
          <span class="hours"></span>
          <p>Hours</p>
        </div>

        <div class="rect">
          <span class="minutes"></span>
          <p>Minutes</p>
        </div>

        <div class="rect">
          <span class="seconds"></span>
          <p>Seconds</p>
        </div>
      </div>

      <button class="btn-main" type="button">Start</button>

    </div>

  </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

</body>
</html>

CSS

:root
    --yellow: #fff189;
    --grey: #444444;
    --off-white: #e6e6e6;
    --blue: #047db1;
    --pink: #6b093d;
    --green: #ccf0a9;
    --black: #000000;



h1
    font-size: 4.2em;


h2
    font-size: 1.75em;


*
    font-family: 'Poppins', sans-serif;


.section
    padding-right: 5vw;
    padding-left: 5vw;
    padding-bottom: 3em;
    padding-top: 3em;





/*------------------------------------hero section------------------------------------*/
.hero
    min-height: 100vh;
    background-color: var(--yellow);


.timer
    margin-bottom: 1em;



.rect
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    padding: 0.2em;
    border-radius: 0.5em;
    text-align: center;
    color: var(--off-white);
    background-color: var(--blue);
    height: 6.5em;
    width: 8em;
    min-width: 0;


.rect h1
    font-size: 2.25em;
    font-weight: 700;



.btn-main
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
    border-style: none;
    font-size: 1.1em;
    border-radius: 00.5em;
    background-color: var(--pink);
    color: var(--off-white);
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-right: 1.8em;
    padding-left: 1.8em;


.btn-main:hover
   background-color: var(--grey);

【问题讨论】:

【参考方案1】:

在 .btn-main 类中添加 display: block; css。 访问:https://jsfiddle.net/ktv1frwu/

【讨论】:

【参考方案2】:

我根据浏览器的宽度测试了您的代码,它更改为内联,有时在这些框下方。

通过添加来修复它

显示:在您的 .btn-main 类中阻止

.btn-main
display:block;

【讨论】:

如果你在 css 文件夹中的 css 文件比尝试第二个! 是正确的兄弟,因为我在CSS文件中定义了背景颜色。我可以看到应用于网站的背景颜色。如果结构不正确,则不会将颜色应用于背景。 哦!终于明白了这背后的实际困惑是什么。当您调整窗口大小时,有时按钮转到内联,有时在这些框下方。

以上是关于为啥我的按钮与列中的弹性框内联?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我不能从我的 DataFrame 中的“日期”列中提取月份的列? [复制]

SQL:将行与列中的逗号分隔值合并

MS Access sql将5个表与列中的奇怪字符分组

在 MySql 中,有没有办法将值与列中的数字进行比较?

为啥在一种情况下更改熊猫数据框列中的值很快,而在另一种情况下更改速度很慢?

为啥我的弹性物品没有包装?