0
votes

Les boutons et le champ de saisie ne viennent pas en une ligne

Je veux créer des options de fichier comme ceci: -

| Choisissez Fichier | Browse_BTN | | Upload_btn | | Annuler | h2>

J'écris ce code dans HTML mais je ne reçois pas cette sortie. P>

code HTML: - em> stry> strong> p>

html css bootstrap-4

0 commentaires

6 Réponses :

2
votes

Essayez Ajouter Afficher: Flex; en ligne suivante.

<div style="height: 32px;display: flex;">
....
</div>

0 commentaires

1
votes

Ajouter

display: flex;

0 commentaires

1
votes

<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>

0 commentaires

1
votes

Voici ce que vous voulez exactement.

<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>

0 commentaires

0
votes

Tout d'abord, votre question est marquée Bootstrap-4 mais vous importaitez la version 3:

<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>

0 commentaires

0
votes

Vous pouvez régler le flotteur laissé sur #fileeupload comme:

<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>

0 commentaires