Question

我有这段代码：

图像放在输入元素后面而不是下一个（边距很小）。

现在这是它的工作原理：Inline doesnt work

我没有做到这一点，每个项目都是一个跟随另一个没有重叠

CSS

.mfc-number-step {
  margin: 10px;
  input {
    width: 202;
    height: 41px;
  }
}

.mfc-number-step__status--error {
    border-color: red;
    background: #fff3f2;
}

.mfc-number-step__status--disabled {
    color: #8b8b8b;
}

.mfc-number-step__button {
    width: 41px;
    height: 41px;
}

input, img {
    display: inline;
}

HTML

<div class="mfc-number-step">
  <input type="text" ng-class="{'mfc-number-step__status--error' : mfcNumberStepStatusError === 'true' , '.mfc-number-step__status--disabled' : mfcNumberStepStatusDisabled === 'true'}" ng-disabled="mfcNumberStepStatusDisabled === 'true'" value="{{mfcNumberStepUnitMeasure}}" class="mfc-number-step__input"/>
  <img src="{{mfcNumberStepSubtractIcon}}" class="mfc-number-step__button"/>
  <img src="{{mfcNumberStepAddIcon}}" class="mfc-number-step__button"/>
</div>

Answer 1

首先，如果你想要用大括号加载图片，你应该在img标签内使用 ng-src 而不是 src 属性。

在src属性中使用{{hash}}之类的Angular标记无法正常工作：浏览器将使用文字文本{{hash}}从URL中获取，直到Angular替换{{hash}}中的表达式。 ngSrc指令解决了这个问题。

你正在使用sass吗？因为在正常的CSS中，你不能像在.mfc-number-step中那样嵌套css类。

Answer 2

要使其正常工作，请使用inline-block：

input, img {
    display: inline-block;
    vertical-align: bottom;/* this will do the trick */
    /* make sure to give them same height + line-height + padding */
}

注意：在HTML标记之间保持无间距，以使内联块正常工作，如下所示：

<input type="text" value="sample text"/><img src="/image/myimage.jpg"/><img src="/image/myimage.jpg"/>

Demo

显示内联无法正常工作

2 个答案: