html - 与其他 div 内容相比，输入文本需要更垂直对齐

Question

我创建了一些芯片/标签，旁边有一个输入元素。

http://codepen.io/helloworld/pen/zZeERw

芯片内文本的垂直方向与输入元素内文本的垂直方向不同。“输入新客户名称”稍高或更顶部对齐。

如何在不使用诸如 padding-top:3px 之类的 hack 的情况下解决此问题...

我想规范化输入中的文本方向，因为在我看来，输入中的文本本身也没有在该输入中垂直居中，或者我错了吗？

我该怎么做？

HTML

<div class="md-chips-component">
  <div class="md-chips-container" tabindex="-1">
     <div class="md-chips d-flex">
        <div class="md-chip">
          <div class="md-chip-text">Neil</div><div class="md-chip-remove">X</div>        
       </div>
        <div class="md-chip">
          <div class="md-chip-text">Strongman</div><div class="md-chip-remove">X</div>
       </div>        
       <form [formGroup]="schoolclassForm">
         <input class="md-chip-input" type="text" value="Enter new customer name" />
       </form>
      </div>
  </div>
  <div class="error-messages">
    <p>That field is required.</p>
    <p>Minimum are 3 chars.</p>
     <p>customer already exists.</p>
  </div>
</div>

CSS

.md-chip {
     display: flex;    
    letter-spacing: 0.05rem;
    color: #444;
    border-radius: 16px;
    transition: all 0.3s;
    margin: 0.1rem 0.3rem 0.1rem 0;
    padding: 0.08rem 1rem;

    line-height: 34px;
    background: #efefef;
    user-select: none;
     outline: 0;
    cursor: pointer;
    position: relative;
}

.md-chips-container
{
  padding-bottom:5px;
  border-bottom:2px solid #efefef;
}

.md-chips-container:focus
{
  border-bottom:2px solid #2196F3;
}

.md-chip-text{
  margin-right:10px;
}

.md-chip-input {
    line-height: 34px;
    padding: 0;
    background:transparent;
    outline:none;  
    border-left: 5px solid #42A948; /* green */
    padding-left:5px;   
    } 

.error-messages p
{
  margin-bottom:0px;
  color:red;
}

.md-chip:hover {
  cursor: pointer;
}

Answer 1

对您的代码进行此调整:

.d-flex {
   display: flex;
   align-items: baseline; /* NEW */
}

revised codepen

更多细节在这里:

• What's the difference between flex-start and baseline?
• Flexbox align-items: baseline works, but align-self: baseline doesn't. Why?