Question

所以我使用的是一张bulma卡而不是只有一个固定的标题我想让这个标题成为一个可编辑的文本字段。这不难实现我只需将文本字段放在

中

<p class="card-header-title"> </p>

我得到的是一个延伸到卡片整个宽度的文本字段。那么如何使它更小和左对齐？到目前为止，我尝试了文本字段的size参数，并使用标题中的列和混合结果。

Answer 1

以下是两个选项：

使用<input type="text" />
使用contenteditable制作.card-header-title可编辑的

在第一个选项中，我们将为输入提供一个类，以便我们可以定义特定的宽度。

第二个选项需要一些JavaScript来更新hidden输入字段，以便您可以根据需要访问表单中的更新标题。

＆＃13;

.container {
  padding: 20px;
}

.card {
  margin-bottom: 20px;
}

.card-header-title-input {
  font-size: inherit;
  font-weight: inherit;
  width: 50%;
  display: block;
}

.card-header-title--editable {
  outline: none;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css" rel="stylesheet" />

<div class="container is-fluid">
  <div class="card">
    <header class="card-header">
      <p class="card-header-title">
        <input type="text" class="card-header-title-input" value="Component">
      </p>
      <a href="#" class="card-header-icon" aria-label="more options">
        <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item">Save</a>
      <a href="#" class="card-footer-item">Edit</a>
      <a href="#" class="card-footer-item">Delete</a>
    </footer>
  </div>

  <div class="card">
    <header class="card-header">
      <p class="card-header-title card-header-title--editable" contenteditable>
        Component
      </p>
      <a href="#" class="card-header-icon" aria-label="more options">
        <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
      </a>
    </header>
    <div class="card-content">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
        <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
    <footer class="card-footer">
      <a href="#" class="card-footer-item">Save</a>
      <a href="#" class="card-footer-item">Edit</a>
      <a href="#" class="card-footer-item">Delete</a>
    </footer>
  </div>
</div>

＆＃13;

使卡片标题成为可编辑的文本字段

1 个答案: