Align the labels for the trash mode buttons with display:inline-block

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index 647bfc7..21fb4a8 100644 (file)
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -88,3 +88,9 @@ td:last-child, td:first-child {
 button {
   overflow: hidden;
 }
+
+#trashmode span:last-child {
+  display:inline-block;
+  text-align:left;
+  width:2.8em;
+}

diff --git a/htdocs/index.html b/htdocs/index.html
index 6e6fccb..47fde5f 100644 (file)
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -177,15 +177,15 @@
           <div id="trashmode" class="btn-group-vertical btn-block btn-group-lg" data-toggle="radio">
             <button id="btntrashmodeup" type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-chevron-up"></span>
-              <span class="glyphicon glyphicon-trash"></span> up &nbsp;&nbsp;&nbsp;
+              <span class="glyphicon glyphicon-trash"></span> <span>Up</span>
             </button>
             <button id="btntrashmodesingle" type="button" class="btn btn-default active">
               <span class="glyphicon glyphicon-star-empty"></span>
-              <span class="glyphicon glyphicon-trash"></span> single
+              <span class="glyphicon glyphicon-trash"></span> <span>Single</span>
             </button>
             <button id="btntrashmodedown" type="button" class="btn btn-default">
               <span class="glyphicon glyphicon-chevron-down"></span>
-              <span class="glyphicon glyphicon-trash"></span> down&nbsp;
+              <span class="glyphicon glyphicon-trash"></span> <span>Down</span>
             </button>
           </div>