Question

这是我的代码：

<ul>
  <li>
    <small style="margin-left:2px;">John: </small>
    <button class="btn btn-default btn-sm">C</button>
  </li>
  <li>
    <small style="margin-left:2px;">Eva: </small>
    <button class="btn btn-default btn-sm">B</button>
  </li>
  <li>
    <small style="margin-left:2px;">Michael: </small>
    <button class="btn btn-default btn-sm">A</button>
  </li>
  <li>
    <small style="margin-left:2px;">Error: </small>
    <button class="btn btn-default btn-sm">C</button>
  </li>
  <li>
    <small style="margin-left:2px;">ASD: </small>
    <button class="btn btn-default btn-sm">C</button>
  </li>
</ul>

我希望将按钮显示在另一个下方，例如我使用margin-left设置按钮的样式，但是我无法使用每个按钮执行此操作，因为在原始代码中还有更多按钮。

那么<ul><li></li></ul>是否有解决方案？

Plunker：http://plnkr.co/edit/eeLuK6Fa60JEco2LVTKO?p=preview

Answer 1

一种简单的方法是找到最宽的单词，并将其宽度用作所有<small>的固定宽度

small{
  width:50px;
  display:inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul>
  <li><small>John: </small><button class="btn btn-default btn-sm">C</button></li>
  <li><small>Eva: </small><button  class="btn btn-default btn-sm">B</button></li>
  <li><small>Michael: </small><button  class="btn btn-default btn-sm">A</button></li>
  <li><small>Error: </small><button  class="btn btn-default btn-sm">C</button></li>
  <li><small>ASD: </small><button  class="btn btn-default btn-sm">C</button></li>
</ul>

Answer 2

要获得预期的结果，请使用下面的CSS，其中li的位置相对而按钮的位置相对

small{
  margin-left:2px;
  }

li{
  position:relative
}

li button{
  position:absolute;
  left:50px
}

代码示例 - https://codepen.io/nagasai/pen/QrOBXW

＆＃13;

small{
  margin-left:2px;
  }

li{
  position:relative
}

li button{
  position:absolute;
  left:50px
}

＆＃13;

<head>
    <title></title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="toaster.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js" ></script>
    <script src="http://code.angularjs.org/1.3.3/angular-animate.min.js" ></script>
    <script src="toaster.js"></script>
    <script src="script.js"></script>
</head>
    <body>
      asd
    
       <ul>
          <li><small>John: </small> <button class="btn btn-default btn-sm">C</button></li>
							<li><small>Eva: </small><button  class="btn btn-default btn-sm">B</button></li>
							<li><small>Michael: </small><button  class="btn btn-default btn-sm">A</button></li>
							<li><small>Error: </small><button  class="btn btn-default btn-sm">C</button></li>
							<li><small>ASD: </small><button  class="btn btn-default btn-sm">C</button></li>
						
                        </ul>
                        

        
    </body>

＆＃13;

选项2：

设置li宽度并使按钮向右浮动到li元素

CSS：

small{
  margin-left:2px;
  }

li{
  width:100px;
  padding:5px;
}

li button{
  float:right
}

代码smaple - https://codepen.io/nagasai/pen/qYVMOo

Answer 3

如何将类添加到要添加样式的<ul>或<li>。

其他HTML下的按钮<ul>

3 个答案: