【问题标题】：No linebreak with two divs没有两个 div 的换行符
【发布时间】：2020-02-05 07:39:08
【问题描述】：

我是 HTML 和 CSS 新手，所以请耐心等待。我想要实现的是，以下，

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit：点击我

单击时，粗体文本会创建一个弹出窗口。现在这是我的问题。我在段落和我不想要的 Click on me 之间换行。我的代码如下，

HTML

<div class="panel overflow-hidden">
  {{ range.Site.Params.publication.list }}
  <p class="text-dark">
    <i class="far fa-newspaper"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit: - 
    <div class="popup" onclick="myFunction()"><span style="font-weight:bold">Click on me</span>
    <span class="popuptext" id="myPopup">A Simple Popup!</span>
    </div>
  </p> 
  {{ end }}
</div>

弹出类的 CSS

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

请帮忙

【问题讨论】：

不能在 p 标签内插入 div
有解决办法吗？
使用跨度而不是 div
抱歉，但由于我是新手，您可以发布答案以便我更好地理解。就像相同的代码适用于 span 而不是内部 div？
是的，非常感谢！！！！

标签： html css

【解决方案1】：

我没有收到您的问题，但如果您想在同一行中使用链接，那么您可以这样做：

HTML

<i class="far fa-newspaper"></i> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed 
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco 
  laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit.
<a class="popup" onclick="myFunction()"> 
<strong>Click on me</strong></a>

我刚刚在 stackblitz.com 上复制了您的代码，我希望你明白我的意思是代码： Code:

【讨论】：

【解决方案2】：

我个人认为要创建一个对话框，您需要创建一个覆盖整个屏幕的叠加层，然后将容器布置在屏幕中心。这是演示和现场示例：

HTML

<div class="dialog-overlay">
  <div class="dialog-container">
     Your dialog content goes here!
  </div>
</div>

CSS

.dialog-overlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

.dialog-content {
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 94%;
    padding: 24px 20px;
}

Working example

【讨论】：