如何將段落元素放到下一行-有解無憂

我有一個 div 標簽，后跟 ap 標簽。p 標簽不是從新行開始，而是與 div 行內。

<body>
    <div class="container">
        <h2>fd   frgf tfytfy tfytfyf fyfytf xdx fhgg</h2>
        <form action="/" method="POST">
            <div class="input-field">
               <input type="text" name="address" required="">
               <label>Enter here</label>
               <span></span>
            </div>
            <input type="submit" value="Show Results" name="" class="btn">
        </form>
     </div>
     <p>want this p tag right below the div</p>
</body>

CSS 代碼：

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
}
.container{
  position: relative;
  width: 800px;
  padding: 40px;
  background: #151515;
}
.container h2{
  color: #999;
  margin-bottom: 45px;
}
.input-field
{
  position:relative;
  height:40px;
  width:100%;
}
.input-field input[type="text"]
{
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color:#fff;
  width: 100%;
}
.input-field label
{
  position: absolute;
  top : 0;
  left: 0;
  color: #555;
  pointer-events: none;
  display: block;
  transition: 0.5s;
}
.input-field input[type="text"]:focus   label,
.input-field input[type="text"]:valid   label
{
  transform: translateY(-35px);
  font-size: 14px;
  color: #fff;
  background: #ff006a;
  padding : 2px 6px;
}
.input-field span
{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background: #555;
  width: 100%;
  height: 2px;
}
.input-field span:before
{
  content: '';
  position: absolute;
  top : 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b0ff;
  transform : scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}
.input-field input[type="text"]:focus ~ span:before,
.input-field input[type="text"]:valid ~ span:before
{
  transform : scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}
.btn
{
  margin-top:20px;
  border:none;
  box-shadow: none;
  padding: 10px 25px;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover
{
  background:#00bcd4;

}

我嘗試在 p 標簽和 div 標簽之間使用中斷標簽，也嘗試display: block; 了它們都不起作用。將段落元素放在 div 元素下方而不是右側的正確方法是什么？

uj5u.com熱心網友回復：

問題是您為 body 添加了 display : flex ，因此 body 內的專案將嘗試排成一列而不是一個接一個地停留

要解決此問題，請從正文中洗掉 display:flex

uj5u.com熱心網友回復：

只需簡單地將 p 標簽添加到 div 內，而不是寫在 div 之外...

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
}
.container{
  position: relative;
  width: 800px;
  padding: 40px;
  background: #151515;
}
.container h2{
  color: #999;
  margin-bottom: 45px;
}
.input-field
{
  position:relative;
  height:40px;
  width:100%;
}
.input-field input[type="text"]
{
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color:#fff;
  width: 100%;
}
.input-field label
{
  position: absolute;
  top : 0;
  left: 0;
  color: #555;
  pointer-events: none;
  display: block;
  transition: 0.5s;
}
.input-field input[type="text"]:focus   label,
.input-field input[type="text"]:valid   label
{
  transform: translateY(-35px);
  font-size: 14px;
  color: #fff;
  background: #ff006a;
  padding : 2px 6px;
}
.input-field span
{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background: #555;
  width: 100%;
  height: 2px;
}
.input-field span:before
{
  content: '';
  position: absolute;
  top : 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b0ff;
  transform : scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}
.input-field input[type="text"]:focus ~ span:before,
.input-field input[type="text"]:valid ~ span:before
{
  transform : scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}
.btn
{
  margin-top:20px;
  border:none;
  box-shadow: none;
  padding: 10px 25px;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover
{
  background:#00bcd4;

}

<body>
    <div class="container">
        <h2>fd   frgf tfytfy tfytfyf fyfytf xdx fhgg</h2>
        <form action="/" method="POST">
            <div class="input-field">
               <input type="text" name="address" required="">
               <label>Enter here</label>
               <span></span>
            </div>
            <input type="submit" value="Show Results" name="" class="btn">
        </form>
        <p>want this p tag right below the div</p>
     </div>
</body>

uj5u.com熱心網友回復：

只需將其添加到它自己的 div 等待我會更新答案

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
}
.container{
  position: relative;
  width: 800px;
  padding: 40px;
  background: #151515;
}
.container h2{
  color: #999;
  margin-bottom: 45px;
}
.input-field
{
  position:relative;
  height:40px;
  width:100%;
}
.input-field input[type="text"]
{
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 16px;
  color:#fff;
  width: 100%;
}
.input-field label
{
  position: absolute;
  top : 0;
  left: 0;
  color: #555;
  pointer-events: none;
  display: block;
  transition: 0.5s;
}
.input-field input[type="text"]:focus   label,
.input-field input[type="text"]:valid   label
{
  transform: translateY(-35px);
  font-size: 14px;
  color: #fff;
  background: #ff006a;
  padding : 2px 6px;
}
.input-field span
{
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  background: #555;
  width: 100%;
  height: 2px;
}
.input-field span:before
{
  content: '';
  position: absolute;
  top : 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00b0ff;
  transform : scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}
.input-field input[type="text"]:focus ~ span:before,
.input-field input[type="text"]:valid ~ span:before
{
  transform : scaleX(1);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}
.btn
{
  margin-top:20px;
  border:none;
  box-shadow: none;
  padding: 10px 25px;
  background: #333;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover
{
  background:#00bcd4;

}

<body>
    <div class="container">
        <h2>fd   frgf tfytfy tfytfyf fyfytf xdx fhgg</h2>
        <form action="/" method="POST">
            <div class="input-field">
               <input type="text" name="address" required="">
               <label>Enter here</label>
               <span></span>
            </div>
            <input type="submit" value="Show Results" name="" class="btn">
        </form>
     </div>

     <p>want this p tag right below the div</p>
   
</body>

uj5u.com熱心網友回復：

您可以在 div 標簽中添加 p 標簽，如果這不起作用，那么使用 css 使新的 div 顯示：塊；

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428653.html

標籤：html css

上一篇：屬性選擇器不考慮其中包含的元素

下一篇：在JavaScript的forEach回圈中通過索引從jsonAPI獲取物件值？