我有以下代码笔：
https://codepen.io/anon/pen/RBdWOa https://codepen.io/anon/pen/RBdWOa
我需要的是显示一个图标16x16在边框顶部最左边的位置，如下图所示（红色圆圈应该是图标）。
我有一个LeftIcon以下课程HTML元素。
<i class="fa fa-search LeftIcon"></i>
.LeftIcon {
position: relative;
bottom: 0;
right: 0px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
但如果你看到我需要的地方没有对齐。
有什么线索吗？
如果要将一个元素放置在另一个元素之上，请在父元素上设置相对位置，在子元素上设置绝对位置。然后使用顶部和左侧将项目放置在您想要的位置。在您的情况下，您正在显示彼此相对的元素。
以下是如何实现您所要求的。
- 设置“位置：相对”
.DialogBox__message-content.
- 然后将图标放置在上面的div中。
- 设置如下样式
.LeftIcon class.
position: absolute; //places the icon in absolute position to message-content*
top: calc(50% - 10px); // sets the top at 50% - half of the height (19px)*
left: -12px; // places the element on top of the line*
html body {
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
height: 100%;
-webkit-text-size-adjust: 100%;
font-size: 14px;
font-weight: 400;
font-style: normal;
}
div {
display: block;
}
.DialogBox {
text-align: right;
}
.DialogBox__message {
margin-bottom: 20px;
-webkit-transition: .35s ease;
transition: .35s ease;
text-align: right;
}
.DialogBox__messages-wrapper {
padding: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
min-height: 100%;
background-color: #f2f2f2;
border-style: solid;
}
.DialogBox__message-content {
background-color: #ffffff;
color: #525860;
padding: 15px 35px;
max-width: 400px;
display: inline-block;
margin-bottom: -20px;
margin-right: 20px;
margin-left: 0;
border-radius: 20px;
text-align: left;
word-wrap: break-word;
border-style: dashed;
position: relative;
}
.LeftIcon {
position: absolute;
top: calc(50% - 10px);
left: -12px;
width: 20px;
height: 19px;
border: 1px solid #FFF;
border-radius: 50%;
background: red;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
color: #FFFFFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a first message.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a second message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">This is a third message.</div>
</div>
</div>
<div class="DialogBox__message">
<div class="DialogBox__message-content-wrapper">
<div class="DialogBox__message-content">
This is a final message bye bye.
<i class="fa fa-search LeftIcon"></i>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
