Question

我有以下代码笔：

我需要在边框的最左侧显示图标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;
}

但是，如果您看到的位置与我需要的位置不符。

有任何线索吗？

Answer 1

如果要在另一个元素上放置一个元素，请在父元素上设置相对位置，在子元素上设置绝对位置。然后，根据需要使用顶部和左侧放置项目。就您而言，您正在显示彼此相对的元素。

这是您实现要求的方法。

在.DialogBox__message-content上设置“位置：相对”。
然后将图标放在上面的div中。
在.LeftIcon类上设置以下样式。

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>

Answer 2

罗伊（Roy）很好地掩盖了答案。我在编写本Codepen时。唯一的区别是我使用transform:translate()将图标水平对齐。除此之外，您可以使用text-align: center;和line-height: 17px;将Font Awesome图标的中心居中。

https://codepen.io/Henk-io/pen/VBReaa?editors=1100

.LeftIcon {
   position: absolute;   /*Needs to be Absolute Positioned to the parent relative div*/
   top: 50%;   /*50% from the top*/
   left: -10px;   /*-10px left as the width is 20px*/
   transform: translate(0, -50%);   /*Moves postion of element*/
   text-align: center;   /*Aligns icon in center vertically*/
   line-height: 17px;    /*Aligns icon in center horizontally*/
   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;
}

Answer 3

我会使用flex-box这样的东西。

这是您的示例的简化版本：

.dialog-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 100%;
  height: 32px;
  background: #cccccc;
}

.dialog-box__search {
  min-width: 10%;
  display: block;
  color: #ff0000;
  text-align: center;
}

.dialog-box__content {
   text-align:center;
   width: 100%;
}

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>

<div class="dialog-box">

  <div class="dialog-box__search">
    <i class="fa fa-search"></i>
  </div>
  
  <div class="dialog-box__content">
    First content
  </div>

</div>

</body>
</html>

CSS-在具有相对位置的边框左侧添加图标

3 个答案: