Question

晚上好

我正在为超市开发一个在线购物网站。

我遇到的问题是我想向上移动一个按钮，使其位于文本的同一行中，我向您显示图像以便您更好地理解：

您看到“购买”按钮，我想将其与“ price：2.5 dhs”放在同一行，我输入了<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bougrine Shop - Home</title> <link rel="icon" href="img/Fevicon.png" type="image/png"> <link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="vendors/fontawesome/css/all.min.css"> <link rel="stylesheet" href="vendors/themify-icons/themify-icons.css"> <link rel="stylesheet" href="vendors/nice-select/nice-select.css"> <link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css"> <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/Css_acceuil_marjane.css"> </head> <body>  <header class="header_area"> <div class="main_menu"> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse offset" id="navbarSupportedContent"> <ul class="nav navbar-nav menu_nav ml-auto mr-auto"> <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li> <li class="nav-item submenu dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Shop</a> <ul class="dropdown-menu"> <li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li> <li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li> <li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li> <li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li> <li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li> </ul> </li> <li class="nav-item submenu dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages</a> <ul class="dropdown-menu"> <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li> <li class="nav-item"><a class="nav-link" href="register.html">Register</a></li> <li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li> </ul> </li> <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li> </ul> <ul class="nav-shop"> <li class="nav-item"><button><i class="ti-search"></i></button></li> <li class="nav-item"><button><i class="ti-shopping-cart"></i><span class="nav-shop__circle">3</span></button> </li> <li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li> </ul> </div> </div> </nav> </div> </header>  <main class="site-main">  <section class="hero-banner"> <div class="container"> <div class="row no-gutters align-items-center pt-60px"> <div class="col-5 d-none d-sm-block"> <div class="hero-banner__img"> <img class="img-fluid" src="img/marjane.png" alt=""> </div> </div> <div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0"> <div class="hero-banner__content"> <h4>Shop is fun</h4> <h1>Parcourer tout les produits de marjane sur cette page !</h1> <p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors profitez de nos belles offres !</p> <a class="button button-hero" href="#">Browse Now</a> </div> </div> </div> </div> </section>  <section id="section_all_produit"> <h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1> <div class="card" style="width: 18rem; height: 500px;"> <img src="img/perli.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Perly</h5> <p class="card-text">Quantité : 90g</p> <p class="card-text">Marques : Jaouda</p> <p class="card-text">Lieux de fabrication: Taroudant</p> <h3 class="prix">Prix : 2.5 Dhs</h3> <button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button> </div> </div> <div class="card" style="width: 18rem; height: 500px;" id="card2"> <img src="img/yopro.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Yopro</h5> <p class="card-text">Quantité : 90g</p> <p class="card-text">Marques : Jaouda</p> <p class="card-text">Lieux de fabrication: Taroudant</p> <h3 class="prix">Prix : 2.5 Dhs</h3> <button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button> </div> </div> </section>  <footer class="footer"> <div class="footer-area"> <div class="container"> <div class="row section_gap"> <div class="col-lg-3 col-md-6 col-sm-6"> <div class="single-footer-widget tp_widgets"> <h4 class="footer_title large_title">Notre mission</h4> <p> Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici sur notre site d'une manière assez facile !. </p> </div> </div> <div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6"> <div class="single-footer-widget tp_widgets"> <h4 class="footer_title">Quick Links</h4> <ul class="list"> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Product</a></li> <li><a href="#">Brand</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-6 col-sm-6"> <div class="single-footer-widget instafeed"> <h4 class="footer_title">Gallery</h4> <ul class="list instafeed d-flex flex-wrap"> <li><img src="img/gallery/r1.jpg" alt=""></li> <li><img src="img/gallery/r2.jpg" alt=""></li> <li><img src="img/gallery/r3.jpg" alt=""></li> <li><img src="img/gallery/r5.jpg" alt=""></li> <li><img src="img/gallery/r7.jpg" alt=""></li> <li><img src="img/gallery/r8.jpg" alt=""></li> </ul> </div> </div> <div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6"> <div class="single-footer-widget tp_widgets"> <h4 class="footer_title">Contact Us</h4> <div class="ml-40"> <p class="sm-head"> <span class="fa fa-location-arrow"></span> Notre position </p> <p>Temara, hay el wifaq</p> <p class="sm-head"> <span class="fa fa-phone"></span> Numéro de téléphone </p> <p> (+212) 06 33 26 39 43 <br> </p> <p class="sm-head"> <span class="fa fa-envelope"></span> Notre email </p> <p> nawfalbougrine@outlook.fr <br> </p> </div> </div> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container"> <div class="row d-flex"> <p class="col-lg-12 footer-text text-center">  Copyright ©<script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine <i class="fa fa-heart" aria-hidden="true"></i> </p> </div> </div> </div> </footer>  <script src="vendors/jquery/jquery-3.2.1.min.js"></script> <script src="vendors/bootstrap/bootstrap.bundle.min.js"></script> <script src="vendors/skrollr.min.js"></script> <script src="vendors/owl-carousel/owl.carousel.min.js"></script> <script src="vendors/nice-select/jquery.nice-select.min.js"></script> <script src="vendors/jquery.ajaxchimp.min.js"></script> <script src="vendors/mail-script.js"></script> <script src="js/main.js"></script> </body> </html>

但是它不起作用，按钮不会移动！

我不知道放置条件是否是模板问题，因为我下载了模板香气。

这是我的html代码：

   #h1_all_product {
    text-align: center;
    font-size: 250%;
    text-transform: uppercase;
    color: #2a2b75;
}

.prix{
    color: red;
    font-size: 150%;

}

.btn-achat{
    margin-left: 200px;
   margin-bottom: 50px;

}

#card2{
    margin-left: 300px;
    margin-bottom: 300px;
}

这是我的CSS代码：

connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
2019-12-08T18:14:02.345+0100 E  QUERY    [js] Error: couldn't connect to server 127.0.0.1:27017, 
connection attempt failed: SocketException: Error connecting to 127.0.0.1:27017 :: caused by :: 
Connection refused :
connect@src/mongo/shell/mongo.js:341:17
@(connect):2:6
2019-12-08T18:14:02.347+0100 F  -        [main] exception: connect failed
2019-12-08T18:14:02.347+0100 E  -        [main] exiting with code 1

预先感谢您的帮助！

Answer 1

您必须将div包裹起来

     <div class="myClass">
        <h3 class="prix">Prix : 2.5 Dhs</h3>
        <button type="button" class="btn btn-primary">Primary</button>
      </div>

并在演示中给它一个类，我给它命名为myClass并添加以下属性：

.myClass{
   display:flex;
   align-items: center;
   justify-content: space-between;
}

工作演示：

注意：：我没有您所有的本地图片，因此我只关注您的要求，因此请向下滚动并检查结帐按钮是否与价格保持一致。

#h1_all_product {
    text-align: center;
    font-size: 250%;
    text-transform: uppercase;
    color: #2a2b75;
}

.prix{
    color: red;
    font-size: 150%;

}

.btn-achat{
    margin-left: 200px;
   margin-bottom: 50px;

}

#card2{
    margin-left: 300px;
    margin-bottom: 300px;
}

.myClass{
    display:flex;
    align-items: center;
    justify-content: space-between;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Bougrine Shop - Home</title>
  <link rel="icon" href="img/Fevicon.png" type="image/png">
  <link rel="stylesheet" href="vendors/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="vendors/fontawesome/css/all.min.css">
  <link rel="stylesheet" href="vendors/themify-icons/themify-icons.css">
  <link rel="stylesheet" href="vendors/nice-select/nice-select.css">
  <link rel="stylesheet" href="vendors/owl-carousel/owl.theme.default.min.css">
  <link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">

  <link rel="stylesheet" href="./text.css">
  <link rel="stylesheet" href="css/Css_acceuil_marjane.css">
</head>

<body>
  <!--================ Start Header Menu Area =================-->
  <header class="header_area">
    <div class="main_menu">
      <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
          <a class="navbar-brand logo_h" href="#"><i class="fas fa-shopping-cart"></i> Bougrine</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="collapse navbar-collapse offset" id="navbarSupportedContent">
            <ul class="nav navbar-nav menu_nav ml-auto mr-auto">
              <li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
              <li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">Shop</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="category.html">Shop Category</a></li>
                  <li class="nav-item"><a class="nav-link" href="single-product.html">Product Details</a></li>
                  <li class="nav-item"><a class="nav-link" href="checkout.html">Product Checkout</a></li>
                  <li class="nav-item"><a class="nav-link" href="confirmation.html">Confirmation</a></li>
                  <li class="nav-item"><a class="nav-link" href="cart.html">Shopping Cart</a></li>
                </ul>
              </li>
              <li class="nav-item submenu dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">Pages</a>
                <ul class="dropdown-menu">
                  <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
                  <li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
                  <li class="nav-item"><a class="nav-link" href="tracking-order.html">Tracking</a></li>
                </ul>
              </li>
              <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
            </ul>

            <ul class="nav-shop">
              <li class="nav-item"><button><i class="ti-search"></i></button></li>
              <li class="nav-item"><button><i class="ti-shopping-cart"></i><span
                    class="nav-shop__circle">3</span></button> </li>
              <li class="nav-item"><a class="button button-header" href="#">Buy Now</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <!--================ End Header Menu Area =================-->

  <main class="site-main">

    <!--================ Hero banner start =================-->
    <section class="hero-banner">
      <div class="container">
        <div class="row no-gutters align-items-center pt-60px">
          <div class="col-5 d-none d-sm-block">
            <div class="hero-banner__img">
              <img class="img-fluid" src="img/marjane.png" alt="">
            </div>
          </div>
          <div class="col-sm-7 col-lg-6 offset-lg-1 pl-4 pl-md-5 pl-lg-0">
            <div class="hero-banner__content">
              <h4>Shop is fun</h4>
              <h1>Parcourer tout les produits de marjane sur cette page !</h1>
              <p>Notre site est là pour vous aidez a faire vos courses sur tout les grandes surfaces du maroc alors
                profitez de nos belles offres !</p>
              <a class="button button-hero" href="#">Browse Now</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--------------- all produit ------------>

    <section id="section_all_produit">
      <h1 id="h1_all_product">Voici tout les produits dans dispose notre magasin "Marjane"</h1>
      <div class="card" style="width: 18rem; height: 500px;">
        <img
          src="data:image/jpeg;base64,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"
          class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Perly</h5>
          <p class="card-text">Quantité : 90g</p>
          <p class="card-text">Marques : Jaouda</p>
          <p class="card-text">Lieux de fabrication: Taroudant</p>

          <div class="myClass">
            <h3 class="prix">Prix : 2.5 Dhs</h3>
            <button type="button" class="btn btn-primary">Primary</button>
          </div>


        </div>
      </div>

      <div class="card" style="width: 18rem; height: 500px;" id="card2">
        <img src="img/yopro.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Yopro</h5>
          <p class="card-text">Quantité : 90g</p>
          <p class="card-text">Marques : Jaouda</p>
          <p class="card-text">Lieux de fabrication: Taroudant</p>

          <h3 class="prix">Prix : 2.5 Dhs</h3>
          <button href="#" class="btn btn-primary btn-lg btn-achat"><i class="fas fa-shopping-cart"></i></button>

        </div>
      </div>
    </section>



    <!--================ Start footer Area  =================-->
    <footer class="footer">
      <div class="footer-area">
        <div class="container">
          <div class="row section_gap">
            <div class="col-lg-3 col-md-6 col-sm-6">
              <div class="single-footer-widget tp_widgets">
                <h4 class="footer_title large_title">Notre mission</h4>
                <p>
                  Notre mission c'est de vous satisfere et de rendre vos courses beaucoup plus facile grace à notre
                  site, plus besoin d'allez jusqu'à une grande surface pour faire vos courses, vous pouvez le faire ici
                  sur notre site d'une manière assez facile !.
                </p>

              </div>
            </div>
            <div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6">
              <div class="single-footer-widget tp_widgets">
                <h4 class="footer_title">Quick Links</h4>
                <ul class="list">
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Shop</a></li>

                  <li><a href="#">Product</a></li>
                  <li><a href="#">Brand</a></li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </div>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-6">
              <div class="single-footer-widget instafeed">
                <h4 class="footer_title">Gallery</h4>
                <ul class="list instafeed d-flex flex-wrap">
                  <li><img src="img/gallery/r1.jpg" alt=""></li>
                  <li><img src="img/gallery/r2.jpg" alt=""></li>
                  <li><img src="img/gallery/r3.jpg" alt=""></li>
                  <li><img src="img/gallery/r5.jpg" alt=""></li>
                  <li><img src="img/gallery/r7.jpg" alt=""></li>
                  <li><img src="img/gallery/r8.jpg" alt=""></li>
                </ul>
              </div>
            </div>
            <div class="offset-lg-1 col-lg-3 col-md-6 col-sm-6">
              <div class="single-footer-widget tp_widgets">
                <h4 class="footer_title">Contact Us</h4>
                <div class="ml-40">
                  <p class="sm-head">
                    <span class="fa fa-location-arrow"></span>
                    Notre position
                  </p>
                  <p>Temara, hay el wifaq</p>

                  <p class="sm-head">
                    <span class="fa fa-phone"></span>
                    Numéro de téléphone
                  </p>
                  <p>
                    (+212) 06 33 26 39 43 <br>

                  </p>

                  <p class="sm-head">
                    <span class="fa fa-envelope"></span>
                    Notre email
                  </p>
                  <p>
                    nawfalbougrine@outlook.fr <br>

                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="footer-bottom">
        <div class="container">
          <div class="row d-flex">
            <p class="col-lg-12 footer-text text-center">
              <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
              Copyright &copy;
              <script>document.write(new Date().getFullYear());</script> Droit d'auteur appartient à Mr.Nawfel Bougrine
              <i class="fa fa-heart" aria-hidden="true"></i>
              <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
            </p>
          </div>
        </div>
      </div>
    </footer>
    <!--================ End footer Area  =================-->



    <script src="vendors/jquery/jquery-3.2.1.min.js"></script>
    <script src="vendors/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="vendors/skrollr.min.js"></script>
    <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
    <script src="vendors/nice-select/jquery.nice-select.min.js"></script>
    <script src="vendors/jquery.ajaxchimp.min.js"></script>
    <script src="vendors/mail-script.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

Answer 2

您应该将此行添加到CSS文件中：

.prix {
    color: red;
    font-size: 150%;
    display:inline-block
}

并删除此一个：

.btn-achat {
    /* margin-left: 200px; */
     margin-bottom: 50px; 
}

为什么即使我有余量，我的按钮也不会移动？

2 个答案: