0

シンプルなインライン エディター ウィジェットを作成しようとしています。私が望むのは、テキストをジャンプすることを余儀なくされることなく、編集モードに移行することです。ここにフィドルの例があります。テキストをクリックすると、編集モードに移動しますが、編集モードと表示モードの両方で同じパディングとマージンに設定されている場合でも、コンテンツ「テスト」がジャンプします。

CSS:

.container .display {
  padding: 7px 13px;
  margin:0;
  font-size: 14px;
  line-height: 1.428;
  border: 1px solid transparent;
  display: block;
  vertical-align: middle;
}

.container .editor {
  padding: 7px 13px;
  margin:0;
  border: 1px solid #efefef;
  display: block;
  font-size: 14px;
  line-height: 1.428;
}
4

1 に答える 1

0

フォントと幅を追加する必要があります。

ここではもうジャンプしません: http://jsfiddle.net/28us9efd/4/

.container .display {
  padding: 7px 13px;
  margin:0;
  font-size: 14px;
  line-height: 1.428;
  border: 1px solid red;
  display: block;
  width: 100%;
  font-family: arial;
  vertical-align: middle;
}

.container .editor {
  padding: 7px 13px;
  margin:0;
  width: 100%;
  border: 1px solid green;
  display: block;
  font-family: arial;
  font-size: 14px;
  line-height: 1.428;
}
于 2014-10-11T20:13:26.420 に答える