尝试添加显示内容：flex;在下面的行中。
<div style="height: 32px;display: flex;">
....
</div>
,
添加
display: flex;
设置为高度为32px的内部div
,
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-5" style="margin-right: 40px; display:flex">
<input type="file" name="fileupload" value="fileupload" id="fileupload" class="mt-3" />
<input type="submit" value="Upload" onclick="fnUpload()" class="btn blue">
<input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue">
</div>
</div>
</body>
</html>
,
这正是您想要的。
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="row">
<div class="col-md-5" style="margin-right :20px; border: 1px solid #e5e5e5; height: 32px; margin-right: 40px;">
<div style="height: 32px;">
<span> Choose File : </span>
<input type="button" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
<input type="submit" value="Upload" onclick="fnUpload()" class="btn blue" style="display:inline-block">
<input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue" style="display:inline-block">
</div>
</div>
</div>
</body>
</html>
工作示例：https://codepen.io/pgurav/pen/mddKPmY
,
首先，您的问题被标记为bootstrap-4，但您正在导入版本3：
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
您可以在Bootstrap 4中使用input-group来显示想要的按钮。
如果要自定义更多内容，请参考official documentation。
代码最终将看起来像这样：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-group" style="margin-right :20px; border: 1px solid #e5e5e5; height: 32px; margin-right: 40px;">
<div class="input-group-prepend">
<span class="input-group-text">Choose file</span>
</div>
<div class="custom-file">
<input type="file" name="fileupload" value="fileupload" id="fileupload" style=" margin-right: 80px;" class="mt-3" />
</div>
<div class="input-group-append">
<input type="submit" value="Upload" onclick="fnUpload()" class="btn blue">
<input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue">
</div>
</div>
</div>
</div>
</body>
</html>
,
您可以像这样在#fileupload上设置向左浮动：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
#fileupload { float:left; }
</style>
<body>
<div class="row">
<div class="col-md-5" style="margin-right :20px; border: 1px solid #e5e5e5; height: 32px; margin-right: 40px;">
<div style="height: 32px;">
<input type="file" name="fileupload" value="fileupload" id="fileupload" style=" margin-right: 80px;" class="mt-3" />
<input type="submit" value="Upload" onclick="fnUpload()" class="btn blue">
<input type="button" value="Cancel" onclick="cancelUpload()" class="btn blue">
</div>
</div>
</div>
</body>
</html>
本文链接：https://www.f2er.com/3138582.html
