修改 @FileUpload.GetHtml 帮助器的外观答案

【问题标题】：Modifying the look of @FileUpload.GetHtml helper修改 @FileUpload.GetHtml 帮助器的外观
【发布时间】：2016-02-19 15:42:48
【问题描述】：

我有一个 @Fileupload 助手工作得很好。我只想更改基本外观，例如增加行之间的空间或在最后一个输入文件和输入提交之间添加一个 hr。

有没有办法在这上面加行？

@if (!IsPost) {
    @FileUpload.GetHtml(
        initialNumberOfFiles:4,
        allowMoreFilesToBeAdded:false,
        includeFormTag:true,
        uploadText:"Send")
    }

如你所见，helper 可以发送 4 个文件，但是看起来太打包了。

感谢您的帮助

【问题讨论】：

你试过什么？您可能可以通过 CSS 实现您所要求的大部分内容。
也许 =) 你能解释一下你会怎么做吗？如果我更改我的 P 样式，它会更改所有页面。我怎么能说更改或添加 p 行到这个特定部分？我是初学者
将它包裹在另一个您可以定位的元素中，以防止您的样式影响整个页面。使用更具体的选择器，您可以覆盖现有样式：smashingmagazine.com/2007/07/…
或者，如果生成的 HTML 在您可以定位的 HTML 块的根元素上已经具有唯一的类、id 或属性，则将其用作选择器的基础。

标签： html razor multifile-uploader

【解决方案1】：

我完全不推荐使用这个助手，因为现在大多数浏览器都支持<input type="file" multiple/>，这比 FileUpload 助手的多个输入更加用户友好。但是，如果您对这个想法深信不疑，您可以这样做来增加输入之间的空间：

<style>
    input[type=file]{
        margin-bottom: 20px;
    }
</style>

【讨论】：