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

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

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

1 个答案: