Question

我正在尝试建立一个测验，当我无法一直证明这一点时，请查看我的JsFiddle。

HTML

            <div id="1" class="option"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec dolor nisi. Sed dui lacus, placerat eget hendrerit ut, pellentesque ut arcu. Suspendisse sagittis nisi sapien, vitae porta odio gravida eu.</p></div>
            <div id="2" class="option"><p>Suspendisse suscipit velit a enim porta ultricies. Vivamus sit amet purus in sapien euismod congue eu at felis. Nulla vehicula rutrum elit, et congue libero cursus at. Phasellus eu nisi nec mi volutpat eleifend. Curabitur sollicitudin laoreet augue vitae egestas</p></div>
            <div id="3" class="option"><p>Duis ut ante elit. Vestibulum varius et tellus ac condimentum. Nam scelerisque faucibus massa, sed molestie mauris convallis et. Duis luctus lobortis quam et varius.</p></div>

CSS

                .option{width:400px;
                height:200px;
                margin:15px;
                font-size:18px;
                color:#FFFFFF; 
                padding:2px;
                padding-left:10px;
                border: 2px solid white;
                cursor:pointer;
                background-color:#3399FF;
                line-height: 200px;
                text-align: center;
                white-space: normal;
                }

                .option:hover{
                border:#FC0 solid 2px;
                color:#FC0;
                }

谢谢！

Answer 1

从你的样式高度，行高和设置text-align中取消对齐：

     .option{width:400px;
            margin:15px;
            font-size:18px;
            color:#FFFFFF; 
            padding:2px;
            padding-left:10px;
            border: 2px solid white;
            cursor:pointer;
            background-color:#3399FF;
            text-align: justify;
            white-space: normal;
            }

            .option:hover{
            border:#FC0 solid 2px;
            color:#FC0;
            }

在按钮选项中对齐大文本

1 个答案: