如何使侧边栏按钮填充和边距对齐？

Question

我正在尝试对齐侧边栏菜单内的按钮，但在某个地方我犯了错误，它总是保持在右边，在 css 中不好任何想法，我怎样才能使侧边栏菜单对齐或任何更好的在侧边栏菜单上应用 css 的建议将不胜感激?

sideBar.html

<div class="sideBarMenu" ng-show="showMenu">
    <ul>
        <li>
            <button type="button" class="btn btn-danger  btn-lg" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record" title="start recording"></span></button>
        </li>
        <li>
            <button type="button" class="btn btn-primary btn-lg" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop" title="stop recording"></span></button>
        </li>
        <li>
            <!--<button type="button" class="btn btn-success btn-md" ng-click="searchLogs()"><span class="glyphicon glyphicon-search" title="search logs in bowser"></span></button>-->
            <button type="button" class="btn btn-info  btn-lg" ng-click="serverFiles()"><span class="glyphicon glyphicon-folder-open" title="download server logged files"></span></button>
        </li>
    </ul>
</div>

main.css

.sideBarMenu {
    height:300px;
    width:100px;
    position:absolute;
    top:35px;
    right:65px;
    border: solid 1px grey;
    background-color: grey;
}
.sideBarMenu ul li {
    padding: 5px 5px 5px 5px;
    list-style: none;
}
.sideBarMenu ul {
    margin: 5px 5px 5px 5px;
}

Answer 1

你可以试试，

.sideBarMenu {
  height:300px;
  width:100px;
  position:absolute;
  top:35px;
  right:65px;
  border: solid 1px grey;
  background-color: grey;
 }
 .sideBarMenu ul{
   margin: 0;
   padding: 0;

.sideBarMenu ul li {
  list-style: none;
  display: block;
}
.sideBarMenu ul li button {
  display: block;
  padding: 12px 10px;
  text-align: center;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #000;
  background-color: #ccc;
 }

您可以根据需要更改内边距和边距。