css - 使用输入水平内联图像
问题描述
如何水平内联图像:<%= image_tag form.object.images_url(:thumb).to_s %>
输入control-fileupload
以下内容:
input[type=file] {
display: block !important;
right: 1px;
top: 1px;
height: 34px;
opacity: 0;
width: 100%;
background: none;
position: absolute;
overflow: hidden;
z-index: 2;
}
.control-fileupload {
display: block;
border: 1px solid #d6d7d6;
background: #FFF;
border-radius: 4px;
width: 100%;
height: 36px;
line-height: 36px;
padding: 0px 10px 2px 10px;
overflow: hidden;
position: relative;
&:before, input, label {
cursor: pointer !important;
}
/* File upload button */
&:before {
/* inherit from boostrap btn styles */
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
transition: color 0.2s ease;
/* add more custom styles*/
content: 'Browse';
display: block;
position: absolute;
z-index: 1;
top: 2px;
right: 2px;
line-height: 20px;
text-align: center;
}
&:hover, &:focus {
&:before {
color: #333333;
background-color: #e6e6e6;
color: #333333;
text-decoration: none;
background-position: 0 -15px;
transition: background-position 0.2s ease-out;
}
}
label {
line-height: 24px;
color: #999999;
font-size: 14px;
font-weight: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
z-index: 1;
margin-right: 90px;
margin-bottom: 0px;
cursor: text;
}
}
<div class="nested-fields">
<img src="pic_trulli.jpg" alt="Italian Trulli">
<span class="control-fileupload">
<input type="text" name="fname">
</span>
<div class="field_with_errors">
<label class="message">if error exists</label>
<a href="url">Remove</a>
</div>
</div>
实现@mulla.azzi 的建议,我得到了这个:
解决方案
将 'control-fileupload' 类的 'block' 更新为 'inline-block' 并删除 width 属性对您有用。
input[type=file] {
display: block !important;
right: 1px;
top: 1px;
height: 34px;
opacity: 0;
width: 100%;
background: none;
position: absolute;
overflow: hidden;
z-index: 2;
}
.control-fileupload {
display: inline-block;
border: 1px solid #d6d7d6;
background: #FFF;
border-radius: 4px;
height: 36px;
line-height: 36px;
padding: 0px 10px 2px 10px;
overflow: hidden;
position: relative;
&:before, input, label {
cursor: pointer !important;
}
/* File upload button */
&:before {
/* inherit from boostrap btn styles */
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
transition: color 0.2s ease;
/* add more custom styles*/
content: 'Browse';
display: block;
position: absolute;
z-index: 1;
top: 2px;
right: 2px;
line-height: 20px;
text-align: center;
}
&:hover, &:focus {
&:before {
color: #333333;
background-color: #e6e6e6;
color: #333333;
text-decoration: none;
background-position: 0 -15px;
transition: background-position 0.2s ease-out;
}
}
label {
line-height: 24px;
color: #999999;
font-size: 14px;
font-weight: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
z-index: 1;
margin-right: 90px;
margin-bottom: 0px;
cursor: text;
}
}
<div class="nested-fields">
<img src="pic_trulli.jpg" alt="Italian Trulli">
<span class="control-fileupload">
<input type="text" name="fname">
</span>
<div class="field_with_errors">
<label class="message">if error exists</label>
<a href="url">Remove</a>
</div>
</div>
推荐阅读
- javascript - FileSystem.writeAsStringAsync 崩溃
- c# - 如何将 Excel (.xlsx) 文件导入并显示到 Blazor WASM 客户端(不上传到服务器)
- c++ - Arduino,了解无效转换警告字符*
- python - 检查某人是否有防止反应的作用
- c - 在 C 中实现泰勒级数的函数返回参数的值
- python - 如何更改 PyTorch 中的默认图像形状?
- c# - 公共交通消费者依赖注入
- google-apps-marketplace - 安装 Google Marketplace 应用程序时为用户创建欢迎邮件
- javascript - 当它是 CSV 文件时,如何使用 Chartjs 按年龄填充病例和死亡人数?
- spring - Spring响应式读取Web客户端响应