-2
Ich habe dieses Bild 
Ausrichtung für Text und Links in der Liste li
und ich möchte meinen Code das gleiche machen. Ich habe oben einen Absatz und dann eine Liste mit Text und Links für Buttons in jedem li eingefügt. Ich weiß nicht, welche die beste Option ist, um den Text links und die Schaltflächen rechts auszurichten. Bitte helfen Sie mir, sie wie im Bild auszurichten.
Das ist mein Code.
\t $(function(){
$(".bt1").click(function(){
$(this).attr("disabled", "disabled").css({"background-color":"green", "color":"#FFFFFF"});
$(".bt2").removeAttr("disabled").css({"background-color":"#000000", "color":"#FFFFFF"});
});
// if you want first button to be disabled when second button is clicked
$(".bt2").click(function(){
$(this).attr("disabled", "disabled").css({"background-color":"green", "color":"#FFFFFF"});
$(".bt1").removeAttr("disabled").css({"background-color":"#000000", "color":"#FFFFFF"});
});
});.bt1 {
background-color:green;
color: #FFFFFF;
margin-right: 0px;
}
.bt2 {
background-color:#000000;
color: #FFFFFF;
}
.bt1,
.bt2 {
cursor: pointer;
margin: 0;
font: normal 10px/15px 'CenturyGothic';
padding: 3px 10px;
}
ul li {
list-style: none;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="option-panel">
<p>Que voulez-vous activer parmi ces outils </p>
<ul>
<li>
Portefolio & services
<span title="Click here" class="btn-group">
<a class="bt1" class="btn btn-primary">Activé</a>
<a class="bt2" class="btn btn-primary">Désactivé</a>
</span>
</li>
<li>
Système de réservation restaurant
<span title="Click here" class="btn-group">
<a class="bt1" class="btn btn-primary">Activé</a>
<a class="bt2" class="btn btn-primary">Désactivé</a>
</span>
</li>
<li>
Système de commandes E-shop
<span title="Click here" class="btn-group">
<a class="bt1" class="btn btn-primary">Activé</a>
<a class="bt2" class="btn btn-primary">Désactivé</a>
</span>
</li>
<li>
Système de réservation table de restaurant
<span title="Click here" class="btn-group">
<a class="bt1" class="btn btn-primary">Activé</a>
<a class="bt2" class="btn btn-primary">Désactivé</a>
</span>
</li>
</ul>
</div>
</body>
</html>