Question

我正在尝试创建一个简单的内联编辑器小部件。我想要的是转移到编辑模式而不是被迫跳转文本。这是一个fiddle示例。当我们点击文本时，它将进入编辑模式，但即使在编辑和显示模式下设置为相同的填充和边距，内容“test”也会跳转。

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;
}

Answer 1

你应该添加字体和宽度。

这里它不再跳跃了： 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;
}

在内联编辑器中跳转内容

1 个答案: