Question

是否可以在此类弹出窗口中使用不同的文本对齐方式，如W3Schools How To（https://www.w3schools.com/howto/howto_js_popup.asp）所示？

这个div部分显示了我想用弹出文本做什么：

<div class="popup" onclick="myFunction()">Click me to toggle the popup
 <span class="popuptext" id="myPopup">
I'd Like to Center this Heading
<br><br>
Align-left this message.
<br><br>
And center this final prompt
</span>
</div>

这是最原始的最相关的CSS：

/* Popup container - can be anything you want */
.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;
}

Answer 1

每个文本部分应分成不同的容器，这些容器又会有不同的样式。

.popup {
  background-color: #fafafa;
}

.popup-header,
.popup-footer {
  text-align: center;
  margin-bottom: 20px;
}

.popup-body {
  text-align: left;
}

<div class="popup" onclick="myFunction()">Click me to toggle the popup
 <div class="popuptext" id="myPopup">
   <div class="popup-header">
     <span>I'd Like to Center this Heading</span>
    </div>
    <div class="popup-body">
      <span>Align-left this message.</span>
    </div>
    <div class="popup-footer">
      <span>And center this final prompt</span>
    </div>
  </div>
</div>

在您的代码中，整个文本内联在一个单独的元素中，因此无法将对齐方式更改为不同的文本。您必须将它们分开，就像我使用popup-header，popup-body和popup-footer CSS类一样。

如何在弹出窗口中使用不同的文本对齐方式

1 个答案: