文章/答案/技术大牛

发布

社区首页 >问答首页 >当我在HTML日期输入字段中输入数据时，它的内容正在向左移动。

问当我在HTML日期输入字段中输入数据时，它的内容正在向左移动。
EN

Stack Overflow用户

提问于 2015-07-21 11:33:52

回答 2查看 789关注 0票数 0

我不知道怎么解决这个问题。在我的HTML中有2个´inputtype=“date”字段，如下所示：

<div class="search-wrapper">
  <div class="advanced-search">
    <form>
      <input type="text" placeholder="Dateiname">
      <input type="text" placeholder="Benutzer">
      <input type="date" placeholder="Erstelldatum">
      <input type="date" placeholder="Änderungsdatum">
      <textarea placeholder="Erste Zeile"></textarea>
      <select>
        <option disabled selected>Kategorie</option>
        <option>Rechnungen</option>
        <option>Notizen</option>
      </select>
      <select>
        <option disabled selected>Projekt</option>
      </select>
      <img id="advSearchSubmit" src="icons/search.png" />
    </form>
  </div>
</div>

以及相应的SCSS：

.search-wrapper {
  position: fixed;

  .advanced-search {
    display: none;
    float: right;
    width: 600px;
    padding: 40px 10px 10px 10px;
    background-color: $accent-color;
    color: $font-color-secondary;
    overflow: hidden;

    img {
      vertical-align: top;
      width: 25px;
      height: 25px;
      margin-top: 10px;
      cursor: pointer;
    }

    input[type="text"], input[type="date"], select, textarea {
      vertical-align: top;
      width: 110px;
      height: 25px;
      margin: 10px;
      padding: 2px;
      background: $data-background-color;
      color: #555;
      border: 1px solid $background-color;
      outline-color: $main-color;
      font-size: 100%;
    }

    textarea {
      height: 2em;
      width: 41.2em;
    }
  }
}

当我在输入字段中输入日期时，它就会被移到左边，并且不完全可见。当输入字段中没有输入任何内容时，以及当输入了某些内容时，如下所示：

日期输入截图

我该如何纠正这种行为呢？

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-07-21 11:54:22

我自己修好了。我只需将width的input[type="date"]字段增加到至少120px

票数 0

Stack Overflow用户

发布于 2015-07-21 12:40:23

.search-包装器和. and 缺少关闭大括号，如果不使用js，则删除display属性

.search-wrapper {
  position: fixed;
}
  .advanced-search {

    float: right;
    width: 600px;
    padding: 40px 10px 10px 10px;
    background-color: $accent-color;
    color: $font-color-secondary;
    overflow: hidden;
  }
    img {
      vertical-align: top;
      width: 25px;
      height: 25px;
      margin-top: 10px;
      cursor: pointer;
    }

    input[type="text"], input[type="date"], select, textarea {
      vertical-align: top;
      width: 110px;
      height: 25px;
      margin: 10px;
      padding:0px 4px;
     box-sizing: border-box;
      padding: 2px;
      background: $data-background-color;
      color: #555;
      border: 1px solid $background-color;
      outline-color: $main-color;
      font-size: 100%;
    }
    input[type="date"]{

    width:140px;    }

    textarea {
      height: 2em;
      width: 41.2em;
    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31537915

复制

相似问题

问当我在HTML日期输入字段中输入数据时，它的内容正在向左移动。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我在HTML日期输入字段中输入数据时，它的内容正在向左移动。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我在HTML日期输入字段中输入数据时，它的内容正在向左移动。
EN