Как выровнять маркеры в списке?

292

15 декабря 2016, 16:20

Есть список <input type='radio'>, к которому применен стиль list-style: lower-alpha;. Также используется Bootstrap версии 3. Маркеры выглядят ужасно, и хотелось бы выровнять их.

Пример того, как это выглядит, тут.

Как это сделать правильно?

<div class="container" role="main">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="questions">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                             <h3>Question 1</h3>   
                        </div>
                        <div class="panel-body">
                            <div class="question">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                                <div class="input-group">
                                    <ul>
                                        <li>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span>    
                                                </label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span>   
                                                </label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span>   
                                                </label>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="radio">
                                                <label>
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span>    
                                                </label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

добавь

li .radio label{
    display: inline-block;
    vertical-align: top;
}

Результат

li { 
    list-style: lower-alpha; 
} 
li .radio label{ 
    display: inline-block; 
    vertical-align: top; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/> 
<div class="container" role="main"> 
    <div class="container-fluid"> 
        <div class="row"> 
            <div class="col-md-8"> 
                <div class="questions"> 
                    <div class="panel panel-default"> 
                        <div class="panel-heading"> 
                             <h3>Question 1</h3> 
 
                        </div> 
                        <div class="panel-body"> 
                            <div class="question"> 
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
                                <div class="input-group"> 
                                    <ul> 
                                        <li> 
                                            <div class="radio"> 
                                                <label> 
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span> 
 
                                                </label> 
                                            </div> 
                                        </li> 
                                        <li> 
                                            <div class="radio"> 
                                                <label> 
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span> 
 
                                                </label> 
                                            </div> 
                                        </li> 
                                        <li> 
                                            <div class="radio"> 
                                                <label> 
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span> 
 
                                                </label> 
                                            </div> 
                                        </li> 
                                        <li> 
                                            <div class="radio"> 
                                                <label> 
                                                    <input type="radio" name="answer" /> <span class="answer">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</span> 
 
                                                </label> 
                                            </div> 
                                        </li> 
                                    </ul> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
</div>

http://jsfiddle.net/L5mwaqyo/