Question

我正在努力使label直接位于input字段之上，我想要一个图标显示 next 到input 1}}字段。

＆＃13;

@import url("//fonts.googleapis.com/icon?family=Material+Icons");

input,
label {
    display: block;
}

＆＃13;

<div>
    <label for="username">Username</label>
    <input id="username" placeholder="Username" class="">
    <i class="material-icons">accessibility</i>
</div>

＆＃13;

我可以使用上面的CSS获取label上方的input。但是如何获得输入字段旁边的icon？

JS Fiddle

Answer 1

输入必须显示为内联块

 label {
   display: block;
 }

 input {
    display: inline-block;
 }

https://jsfiddle.net/51zrg6ms/2/

Answer 2

@import url("//fonts.googleapis.com/icon?family=Material+Icons");

label {
  display: block;
}

input{
  display:inline;
  }

<div>
  <label for="username">Username</label>
  <input id="username"
         placeholder="Username"
         class="">
  <i class="material-icons">accessibility</i>
</div>

Answer 3

对于那些在搜索中遇到此帖子的人，MaterializeCSS存储库上有一个线程以各种方式实现此目的。参见：https://github.com/Dogfalo/materialize/issues/1214

我正在使用amikeret在此回复中发布的解决方案：https://github.com/Dogfalo/materialize/issues/1214#issuecomment-430598527

他的代码是

.input-field {
  // Add inset definition to .prefix
  .prefix {
    &:not(.inset) {
      & ~ input,
      & ~ textarea,
      & ~ label,
      & ~ .validate ~ label,
      & ~ .helper-text,
      & ~ .autocomplete-content {
        margin-left: 3rem;
      }
    }
    &.inset {
      & ~ input,
      & ~ textarea,
      & ~ label,
      & ~ .validate ~ label,
      & ~ .helper-text,
      & ~ .autocomplete-content {
        margin-left: 0;   // This is a patch until it's incorporated into the framework
        padding-left: 3rem;
      }
    }
  }

  // Suffix Icons
  .suffix {
    position: absolute;
    width: $input-height;
    font-size: $input-icon-size;
    transition: color .2s;
    top: ($input-height - $input-icon-size) / 2;
    right: 0;
    text-align: right;

    &.active { color: $input-focus-color; }
  }
  .suffix {
    & ~ input,
    & ~ textarea,
    & ~ label,
    & ~ .validate ~ label,
    & ~ .helper-text,
    & ~ .autocomplete-content {
      width: calc(100% - 3rem);
    }
    &:not(.inset) {
      & ~ input,
      & ~ textarea,
      & ~ label,
      & ~ .validate ~ label,
      & ~ .helper-text,
      & ~ .autocomplete-content {
        margin-right: 3rem;
      }
    }
    &.inset {
      & ~ input,
      & ~ textarea,
      & ~ label,
      & ~ .validate ~ label,
      & ~ .helper-text,
      & ~ .autocomplete-content {
        padding-right: 3rem;
      }
    }
  }
  .suffix ~ label { margin-right: 3rem; }
  &.col {
    .suffix ~ label,
    .suffix ~ .validate ~ label {
      width: calc(100% - 3rem - #{$gutter-width});
    }
  }

  // What if we have both prefix and suffix?
  .prefix ~ .suffix ~ input {
    width: calc(100% - 6em);
  }
  &.col {
    .suffix ~ .suffix ~ label,
    .suffix ~ .suffix ~ .validate ~ label {
      width: calc(100% - 6rem - #{$gutter-width});
    }
  }
}

// Inset icons
.material-icons {
  &.inset {
    font-size: $input-icon-size * .75;
    top: ($input-height - $input-icon-size) / 2 * 1.5;
  }
  &.actionable {
    cursor: pointer;
    z-index: 2;
  }
}

在输入字段旁边显示图标

3 个答案: