怎么使<el-input>在同一行显示,在<div>或其它的父标签里不换行?
在正的HTML中,<input>标签是不换行,例如:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title> New Document </titl
·
在正的HTML中,<input>标签是不换行,例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div>
input-1:<input type="text" name="">
input-2:<input type="text" name="">
input-3:<input type="text" name="">
</div>
</body>
</html>
效果如下图:
这个不需要做什么设置就自然在同一行显示了,但是如果在Vue的 ElementUI中,使用<el-input>组件就不会这么简单了,默认是不会在同一显示的,我就遇到这样的一个问题,同样在一个<div>标签里,每个<el-input/>都会换行。搜了一些资料但都不理想。
有的是使用表格使每一个input都作为一个列放在一行的,有的是使用 <el-row>和<el-col>组件使其在同一显示的,但都不是最简单的方法,而且还好像走了弯路,其实只需要改一个style属性即可,这个属性就是 display:inline !!!
<div class="distance-input" v-for="(item ,index ) in distanceArray">
input-1:<el-input type="text" v-model="item.name" maxlength="20" size="mini" style="display:inline"></el-input>
input-2:<el-input type="text" v-model="item.name" maxlength="20" size="mini" style="display:inline"></el-input>
input-3:<el-input type="text" v-model="item.name" maxlength="20" size="mini" style="display:inline"></el-input>
input-4:<el-input type="text" v-model="item.name" maxlength="20" size="mini" style="display:inline"></el-input>
input-5:<el-input type="text" v-model="item.name" maxlength="20" size="mini" style="display:inline"></el-input>
</div>
试试效果,OK!!
更多推荐
已为社区贡献1条内容
所有评论(0)