代码之家 › 专栏 › 技术社区 › VAAA

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

css

VAAA · 技术社区 · 7 年前

我有以下电笔:

我需要的是展示一个图标 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;
}

有线索吗?

3 回复 | 直到 7 年前

Roy Scheffers suresh sunkari 7 年前

如果要将一个元素放置在另一个元素之上,请在父元素上设置相对位置,在子元素上设置绝对位置。然后使用顶部和左侧来定位项目。在您的例子中,您显示的是相对的元素。

以下是你如何实现你所要求的。

打开“位置:相对” .DialogBox__message-content .
在 .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>

henk.io 7 年前

罗伊很好地回答了皮蒂的问题。当我在写密码笔的时候。唯一不同的是我用 transform:translate() text-align: center; 和 line-height: 17px;

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;
}

BJT 7 年前

我会用弹性盒子来做这样的事情。

以下是您的示例的简化版本:

.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>