I have 10 buttons and I would like to place the buttons on the top right, but I don't know how to do it? Currently my buttons are at the bottom, I don't know how to move my buttons?
I would like to get this result, (see below)
I think I need to use a display:flex ?
Do you have any idea, please?
Here is my code below
Thank you in advance for your help et your time.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div >
<h1 >Signalétique</h1>
<div >
<div style="width: 100%;">
<div >
<table style="width: 60%">
<tbody>
<tr>
<th>Ticker</th>
<td>SOLB</td>
</tr>
<tr>
<th>Code SVM</th>
<td>347075</td>
</tr>
<tr>
<th>Code ISIN</th>
<td>BE00003470755</td>
</tr>
<tr>
<th>Genre</th>
<td>Actions</td>
</tr>
<tr>
<th>Pays d'origine</th>
<td>Belgique</td>
</tr>
<tr>
<th>Secteur économique</th>
<td>Matériaux</td>
</tr>
<tr>
<th>Devise de cotation</th>
<td>EUR</td>
</tr>
<tr>
<th>Groupe de cotation</th>
<td>(AO)</td>
</tr>
<tr>
<th>Unité de cotation</th>
<td>1,0000000</td>
</tr>
<tr>
<th>Site Internet</th>
<td>www.solvay.com</td>
</tr>
</tbody>
</table>
<div >
<button type="button" >Best Execution</button>
<button type="button" >Etat du marché</button>
<button type="button" >Graphiques Historiques</button>
<button type="button" >Historique des cours</button>
<button type="button" >Ordre</button>
</div>
<div >
<button type="button" >Best Execution</button>
<button type="button" >Etat du marché</button>
<button type="button" >Graphiques Historiques</button>
<button type="button" >Historique des cours</button>
<button type="button" >Ordre</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
Minor adjustments will need to be made to the columns, but here's a solution:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<body>
<div >
<h1 >Signalétique</h1>
<div >
<div style="width: 100%;">
<div >
<div >
<div >
<table style="width: 60%;">
<tbody>
<tr>
<th>Ticker</th>
<td>SOLB</td>
</tr>
<tr>
<th>Code SVM</th>
<td>347075</td>
</tr>
<tr>
<th>Code ISIN</th>
<td>BE00003470755</td>
</tr>
<tr>
<th>Genre</th>
<td>Actions</td>
</tr>
<tr>
<th>Pays d'origine</th>
<td>Belgique</td>
</tr>
<tr>
<th>Secteur économique</th>
<td>Matériaux</td>
</tr>
<tr>
<th>Devise de cotation</th>
<td>EUR</td>
</tr>
<tr>
<th>Groupe de cotation</th>
<td>(AO)</td>
</tr>
<tr>
<th>Unité de cotation</th>
<td>1,0000000</td>
</tr>
<tr>
<th>Site Internet</th>
<td>www.solvay.com</td>
</tr>
</tbody>
</table>
</div>
<div >
<div >
<button type="button" >
Best Execution
</button>
<button type="button" >
Etat du marché
</button>
<button type="button" >
Graphiques Historiques
</button>
<button type="button" >
Historique des cours
</button>
<button type="button" >
Ordre
</button>
</div>
<div >
<button type="button" >
Best Execution
</button>
<button type="button" >
Etat du marché
</button>
<button type="button" >
Graphiques Historiques
</button>
<button type="button" >
Historique des cours
</button>
<button type="button" >
Ordre
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>CodePudding user response：
Try using a flexbox