有人可以帮我对齐 div 上的 X 吗？我一直在玩它，无法弄清楚:(

Question

这是笔

<div class="annotation">
<div class="annotext">
<div class=annobar></div>
<div class="x">✕</div>
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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

我一直在努力将所有内容保留在 "annotation" div 中，并使 "annobar" 与文本对齐：

Answer 1

尝试添加：

float: right

到 x 的 css。这将使 X 出现在右侧。

此外，如果您将 X 移动到 annotext 内，并制作 annotext "float: left"，则 X 会出现在该行的顶部。

为了完成它，你让 X 有一个白色的背景来掩盖这条线。

这是最终结果：

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
width:250px;  
  padding:0px;
  float:left;
}

.x{
   padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:right;
  background-color:white;
}


.annobar{
    display:block;
    height:1px;
    border:0;    
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
}

<div class="annotation">
  
  <div class="annotext">
    <div class="x">✕</div>
    <div class=annobar></div>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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
  
</div>

Answer 2

您可以使用 annobar 边距的一半作为顶部位置（因此在本例中为 -0.5rem）绝对定位 x 并制作 annotext position: relative（因此右上角是你想要 x):

.annotation{
  height:auto;
  font-family:cardo;
  width:280px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{
  width:250px;  
  padding:0px;
  position: relative;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  position: absolute;
  right: 0;
  top: -0.5rem;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    width: 90%;
}

<div class="annotation"><div class="annotext"><div class=annobar><div class="x">✕</div></div>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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div></div>

Answer 3

我添加了一个header div，然后把X和红线都放在里面。然后我在这两个上都使用了 float left 。然后我设置主 parent 的宽度来限制文本的宽度。由于浮动，您必须在文本 div 上 clear:both。

编辑更正代码笔 Link Here 是代码笔。

将此用于 HTML

<div class="annotation">
  <div class="annotext">
    <div class="header-div">
      <div class=annobar></div>
      <div class="x">✕</div>
    <div/>
    <div class="text">
      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 in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
  </div>
</div>

将此用于 CSS

.annotation{
  height:auto;
  font-family:cardo;
  width:265px;
  text-align:justify;
  font-size:0.9em;
  padding:30px;
  transition:all 0.4s linear;
}

.annotext{  
  padding:0px;
}

.x{
  padding-left:3px;
  padding-top:3px;
  color:#c73626;
  float:left;
}


.annobar{
    display:block;
    height:1px;
    border:0;       
    border-top:1px solid #c73626;
    margin:1em 0;
    padding:0;
    float: left;
    width:250px;
}
.text{
  clear:both;
}

有人可以帮我对齐 div 上的 X 吗？我一直在玩它，无法弄清楚:(

Can someone help me align the X on this div? I have been playing with it forever and cannot figure it out :(

html

css

block