Я пишу этот код в HTML, но я не получаю этот вывод.
Код 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;"> <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>
Попробуйте добавить дисплей: flex;в следующей строке.
<div style="height: 32px;display: flex;"> .... </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 :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
<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>
Добавьте
display: flex;
к внутреннему элементу со стилем высоты 32px
вы можете установить float влево на #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>
Прежде всего, ваш вопрос помечен как bootstrap-4, но вы импортируете версию 3:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Вы можете использовать input-group в Bootstrap 4, чтобы показывать кнопки так, как вы хотите. Обратитесь к официальной документации , если вы хотите настроить больше.
input-group
Код в конечном итоге будет выглядеть примерно так:
<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>