Javascript 为什么即使使用换行标记，我的“添加到购物车”按钮也会出现在图像旁边而不是图像下方？_Javascript_Html_Css

Javascript 为什么即使使用换行标记，我的“添加到购物车”按钮也会出现在图像旁边而不是图像下方？

javascript html css

Javascript 为什么即使使用换行标记，我的“添加到购物车”按钮也会出现在图像旁边而不是图像下方？,javascript,html,css,Javascript,Html,Css,我正在创建一个电子商务网站。我有一个标题和一个侧边栏。然后是主体部分。在主体部分，我有一个标题为特色产品。然后我在特色产品标题下有一些图片，我将用实际图片替换这些图片。但是当我添加图像时，然后我也在每个图像下面添加添加到购物车按钮。但当我添加一个按钮时，它会直接出现在图像上，而不是在它下面。即使我有一个换行标记。我会非常感激你的帮助谢谢 index.php <?php require_once 'Partials/header.php'; ?> <br><b

我正在创建一个电子商务网站。我有一个标题和一个侧边栏。然后是主体部分。在主体部分，我有一个标题为特色产品。然后我在特色产品标题下有一些图片，我将用实际图片替换这些图片。但是当我添加图像时，然后我也在每个图像下面添加添加到购物车按钮。但当我添加一个按钮时，它会直接出现在图像上，而不是在它下面。即使我有一个换行标记。我会非常感激你的帮助

谢谢

index.php

<?php
require_once 'Partials/header.php';
 ?>
 <br><br><br><br>
 <link rel="stylesheet" type="text/css" href="Styles/Style.css">

<div class="main_wrapper">
<?php
    require_once 'Partials/sidebar.php';
?>


  <!--The main body section start here-->
<div class="main">
    <!--Featured Products List Starts Here-->

    <h2 style="text-align: center;">Featured Products</h2>
  <div class="container">
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
    </div>
<h2 style="text-align: center;">New Arrivals</h2>
    <div class="container 2">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>
<h2 style="text-align: center;">Clothes</h2>
    <div class="container 3">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>
<h2 style="text-align: center;">Brands</h2>
    <div class="container 4">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>

  <style>
      .container {
        display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow: auto;
      justify-content: space-between;
      }
      .container > img {
        display: block;
        margin-top: 5px;
      }

    </style>


  <!--Featured Products List Ends Here-->
  <button name="Black">Black</button>
</div>
<!--The main body section ends here-->

<!--Back To Top Coding Starts Here-->
<head>
<style>

    #back-to-top-btn{
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
        width: 50px;
        height: 50px;
        background-color: #fff;
        color: #333;
        cursor: pointer;
        outline: none;
        border: 3px solid #333;
        border-radius: 50%;
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
        transition-property: background-color, color;
    }

    #back-to-top-btn:hover, #back-to-top-btn:focus{
        background-color: #333;
        color: #fff;
    }

    /* Animations */
.btnEntrance {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}
/* zoomIn */
/* @keyframes btnEntrance {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
} */

/* fadeInUp */
@keyframes btnEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btnExit {
  animation-duration: 0.25s;
  animation-fill-mode: both;
  animation-name: btnExit;
}
/* zoomOut */
/* @keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
} */

/* fadeOutDown */
@keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

</style>
</head>
  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>

<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>

</body>
</html>







特色产品

添加到购物车

添加到购物车

添加到购物车

添加到购物车
新品推荐
衣裳
品牌
.集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
溢出：自动；
证明内容：之间的空间；
}
.container>img{
显示：块；
边缘顶部：5px；
}
黑色
#返回顶部btn{
显示：无；
位置：固定；
底部：20px；
右：20px；
字体大小：20px；
宽度：50px；
高度：50px；
背景色：#fff；
颜色：#333；
光标：指针；
大纲：无；
边框：3px实心#333；
边界半径：50%；
过渡时间：0.2s；
过渡定时功能：易进易出；
过渡属性：背景色、颜色；
}
#返回顶部btn：悬停，#返回顶部btn：焦点{
背景色：#333；
颜色：#fff；
}
/*动画*/
B.本特兰斯{
动画持续时间：0.5s；
动画填充模式：两者都有；
动画名称：btnEntrance；
}
/*缩放*/
/*@关键帧btnEntrance{
从{
不透明度：0；
变换：scale3d（0.3,0.3,0.3）；
}
到{
不透明度：1；
}
} */
/*法德努普*/
@关键帧btnEntrance{
从{
不透明度：0；
转换：translate3d（0,100%，0）；
}
到{
不透明度：1；
变换：translate3d（0,0,0）；
}
}
.btnExit{
动画持续时间：0.25s；
动画填充模式：两者都有；
动画名称：btnExit；
}
/*zoomOut*/
/*@keyframes btnExit{
从{
不透明度：1；
}
到{
不透明度：0；
变换：scale3d（0.3,0.3,0.3）；
}
} */
/*衰减*/
@关键帧btnExit{
从{
不透明度：1；
}
到{
不透明度：0；
转换：translate3d（0,100%，0）；
}
}

这是header.php

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Home - Diamond Collections</title>
        <script src="https://kit.fontawesome.com/1cde82a3ba.js"></script>
        <style>



            @import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

:root {
  --background: rgba(0, 214, 170, .85);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    margin: 0;
    /*background-image: radial-gradient(circle, red, yellow, green);*/
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

.content {

}

/* navigation styles start here */

header {
  background: var(--background);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}

/* changed this from the tutorial video to
   allow it to gain focus, making it tabbable */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
    height: 76px
  }

  .logo {
    grid-column: 2 / 3;
    position: absolute;

    height: 200px;
    //transform: scale(2,2);

  }

  nav {
    // all: unset; /* this causes issues with Edge, since it's unsupported */

    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: initial;
    left: initial;
    /* end Edge support stuff */

    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  nav a::before {
    content: '';
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: 1.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1,1);
  }
}






h1 {
     margin:0
}

.logo a {
     display: flex;
     justify-content: center;
}

.logo img {
    height: 74px;
    margin-top: 1.1px;
}




        </style>
    </head>
    <body>
        <header>
  <h1 class="logo"><a href="#"><img src="Images/Logo5.JPG"></a></h1>
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </nav>
      <form action="" method="" class="search" style="margin-top: 24px;">
      <input type="" name="search" placeholder="Search..." style="padding: 5px; font-size: 15px">
      </form>
  <label for="nav-toggle" class="nav-toggle-label">
    <span></span>
  </label>

</header>


家庭-钻石收藏
@导入url（'https://fonts.googleapis.com/css?family=Work+Sans:300600’；
：根{
--背景：rgba（0,214,170,85）；
}
*，*：：之前，*：：之后{
框大小：边框框；
}
身体{
保证金：0；
/*背景图像：径向梯度（圆形、红色、黄色、绿色）*/
字体系列：“无衬线工作”，无衬线；
字体大小：400；
}
.内容{
}
/*导航样式从这里开始*/
标题{
背景：var（--背景）；
文本对齐：居中；
位置：固定；
z指数：999；
宽度：100%；
}
/*将此从教程视频更改为
允许它获得焦点，使其可选项卡化*/
.导航开关{
位置：绝对！重要；
顶部：-9999px！重要；
左：-9999px！重要；
}
.nav切换：焦点~.nav切换标签{
外形：3倍纯色rgba（浅蓝色，.75）；
}
.导航切换标签{
位置：绝对位置；
排名：0；
左：0；
左边距：1米；
身高：100%；
显示器：flex；
对齐项目：居中；
}
.导航切换标签范围，
.nav切换标签span:：之前，
.nav切换标签span:：after{
显示：块；
背景：白色；
高度：2倍；
宽度：2米；
边界半径：2px；
位置：相对位置；
}
.nav切换标签span:：之前，
.nav切换标签span:：after{
内容：''；
位置：绝对位置；
}
.nav切换标签span:：before{
底部：7px；
}
.nav切换标签span:：after{
顶部：7px；
}
导航{
位置：绝对位置；
文本对齐：左对齐；
最高：100%；
左：0；
背景：var（--背景）；
宽度：100%；
变换：缩放（1,0）；
变换原点：顶部；
过渡：变换400ms缓进缓出；
}
导航ul{
保证金：0；
填充：0；
列表样式：无；
}
李海军{
边缘底部：1米；
左边距：1米；
}
导航a{
颜色：白色；
文字装饰：无；
字号：1.2rem；
文本转换：大写；
不透明度：0；
过渡：不透明度150ms缓进缓出；
}
导航a：悬停{
颜色：#000；
}
.nav切换：选中~nav{
变换：比例（1,1）；
}
.导航切换：选中导航a{
不透明度：1；
过渡：不透明度250ms，缓进缓出250ms；
}
@媒体屏幕和屏幕（最小宽度：800px）{
.导航切换标签{
显示：无；
}
标题{
显示：网格；
网格模板列：1fr自动最小值（600px，3fr）1fr；
高度：76px
}
.标志{
网格柱：2/3；
位置：绝对位置；
高度：200px；
//变换：尺度（2,2）；
}
导航{
//all:unset；/*这会导致Edge出现问题，因为它不受支持*/
位置：相对位置；
文本对齐：左对齐；
过渡：无；
变换：比例（1,1）；
背景：无；
顶部：首字母；
左：首字母；
/*端部边缘支撑材料*/
网格柱：3/4；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
}
导航ul{
显示器：flex；
}
李海军{
左边距：3em；
页边距底部：0；
}
导航a{
不透明度：1；
位置：相对位置；
}
导航a：：之前{
内容：''；
显示：块；
高度：5px；
背景：黑色；
位置：绝对位置；
顶部：1.75em；
左：0；
右：0；
变换：缩放（0,1）；
过渡：转换缓进缓出250ms；
}
导航a:悬停：：之前{
变换：比例（1,1）；
}
}
h1{
保证金：0
}
.标志a{
显示器：flex；
证明内容：c
<style>

    .sidenav {
  height: 100%;
  width: 160px;
  margin-top: 6.1%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

</style>

<div class="sidenav">
  <a href="#">New Arrivals</a>
  <a href="#">Featured</a>
  <a href="#">Clothes</a>
  <a href="#">Brands</a>
</div>


<div class="container">
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
     <div class="test">
        <img src="Images/Logo5.JPG">
        <button>Add to cart</button>
     </div>
</div>