Question

这是我的傻瓜：http://plnkr.co/edit/0srpOqyv5o6V8NhSzhSA?p=preview

如果您点击位置字样，则会显示<ul>元素

我正在努力将<ul>元素与其父<p>标记对齐。

<ul>似乎总是出现在左边（我知道位置是绝对的）。

HTML：

 <div class="section-dropdown">
     <p>It is a
         <div class="dropdown-heading" ng-click="Location = !Location">
             Location
         </div>
         <ul ng-show="Location" class="dropdown-details">
             <li>Italy</li>
             <li>Spain</li>
             <li>Greece</li>
             <li>USA</li>
          </ul>
     </p>
 </div>

Answer 1

删除position:absolute;它会折叠到自身，而不是在你这样做时展开整个宽度，这样它就不能将文本置于其中心。

Answer 2

正如已经确定的那样，当您放置<ul>时绝对将其从文档流中移除，这意味着它位于包含元素之外。您可以通过提供父<ul>来强制position: relative;将自身定位为与其中一个父元素相关联。您可能还需要添加overflow: visible;以查看可能会溢出父级的<ul>的任何部分。

现在<ul>相对于容器，您可以相应地定位它，例如：

.dropdown-details {
  top: 155px;
  left: 50%;
}

如果你想让绝对定位的<ul>像其他内容一样水平居中，你可以使用一些技巧（参见https://stackoverflow.com/a/1777282/2126792）。

以下是经过调整的 plunker 。

我修复了HTML并在<ul>：

周围添加了一个包装器

<div class="section-dropdown">
  <p>It is a
    <span class="dropdown-heading" ng-click="Location = !Location">Location</span>
  </p>
  <div class="dropdown-details">
    <ul ng-show="Location">
      <li>Italy</li>
      <li>Spain</li>
      <li>Greece</li>
      <li>USA</li>
    </ul>
  </div>
</div>

然后将其定位为.grid-wrap div：

.grid-wrap {
  position: relative;
  overflow: visible;
}
.dropdown-details {
  top: 155px;
  left: 50%;
}
.dropdown-details ul {
  position: relative; left: -50%;
  border: 1px dashed #ef8e80;
  padding: 9px;
  background: #ffffff;
}

无法将UL与父p对齐

2 个答案: