对齐list-group-item中的按钮

Question

我正在尝试放入list-group-item中的按钮，但它看起来很糟糕（按钮超出了list-group-item的高度）：

<ul class="list-group">
        <li class="list-group-item">Sound1
            <form class="form-inline pull-right vertical-align">
                <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button>
            </form><span class="badge" style="margin-right: 10px;">0:58</span>
        </li>
        <li class="list-group-item">Sound2
            <form class="form-inline pull-right vertical-align">
                <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button>
            </form><span class="badge" style="margin-right: 10px;">0:15</span>
        </li>
        <li class="list-group-item">Sound3
            <form class="form-inline pull-right vertical-align">
                <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button>
            </form><span class="badge" style="margin-right: 10px;">0:07</span>
        </li>
    </ul>

我该如何正确实现？

Answer 1

您可以使用解决方案https://jsfiddle.net/7dwaxo72/

public class TestClass {

private static int a = 1;
private int b = 1;

public static void main(String[] args) {
    TestClass firstInstance = new TestClass();
    TestClass secondInstance = new TestClass();

    // 'a' shouldn't be accessed like firstInstance.a, use TestClass.a instead(!)
    System.out.println("firstInstance  a: "+firstInstance.a+" b: "+firstInstance.b);  // firstInstance  a: 1 b: 1
    System.out.println("secondInstance a: "+secondInstance.a+" b: "+secondInstance.b);// secondInstance a: 1 b: 1

    firstInstance.a = 2; 
    firstInstance.b = 2;

    System.out.println("firstInstance  a: "+firstInstance.a+" b: "+firstInstance.b);  //firstInstance  a: 2 b: 2
    System.out.println("secondInstance a: "+secondInstance.a+" b: "+secondInstance.b);//secondInstance a: 2 b: 1 
    //a is now 2 also for 'secondInstance' because it's static, secondInstance.b didn't change because b exists specifically for each instance 

    /*
     * You can access 'a' even when no instance of TestClass exists
     * think about a simple Dog class where the amount of legs is 4 for every dog, so you can make it static, 
     * but not every Dog has the same name, so it wouldn't be clever to make the name static
     */
}
}

form {
  margin-top: -7px;
}

希望这会有所帮助。我稍微更改了<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ul class="list-group"> <li class="list-group-item">Sound1 <form class="form-inline pull-right vertical-align"> <span class="badge" style="margin-right: 10px;">0:58</span> <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> </form> </li> <li class="list-group-item">Sound2 <form class="form-inline pull-right vertical-align"> <span class="badge" style="margin-right: 10px;">0:15</span> <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> </form> </li> <li class="list-group-item">Sound3 <form class="form-inline pull-right vertical-align"> <span class="badge" style="margin-right: 10px;">0:07</span> <button class="btn btn-md btn-default" type="button"><span class="glyphicon glyphicon-play"></span></button> </form> </li> </ul>结构。