html - 如何使输入弹出并显示全部内容

Question

我有多个输入，其中一些输入很小，无法显示整个文本（无法更改）。有没有办法在悬停时显示输入的全部内容而不破坏布局的其余部分？我举了一个例子。我试图让输入弹出并在其他输入之上而不破坏设计。

https://jsfiddle.net/14e37gj0/

我不太擅长css。我尝试过这样的事情。

input {
  width: 10%;
}

input:hover {
  width: 100%;
}

此致

标签： htmlcss

Answer 1

将 s包装input在一个 flexbox div 中：

.row{
  display:flex;
  width:100%;
}
input {
  width: 10%;
}

input:hover {
  width: 100%;
}

<div class="row">
<input type="text" value="This text is long and I want to see the whole input when hovering"/>

<input type="text" />
<input type="text" />
<input type="text" />
</div>