Question

我在使用css格式时遇到了一些麻烦。我希望h2成为中心并且在一条线上，但由于某种原因它并没有这样做。我已经检查了显而易见的地方，比如显示属性，但没有发现任何东西。在应用我的CSS之前我使用了normalize.css。来自index.html

    <div class = "input-area">  

    <div class = "input-wrapper">
    <h2>Pick <a href="http://en.wikipedia.org/wiki/Three">three</a> powers!</h2>
            </div>
            <div class = "options">
                <div class = "input-list first-list">
                <ul>
                <li><button type = "button" id = "choice 1"> </button></li>
                <li><button type = "button" id = "choice 2"> </button></li>
                <li><button type = "button" id = "choice 3"> </button></li>
                <li><button type = "button" id = "choice 4"> </button></li>
            <li><button type = "button" id = "choice 5"> </button></li>
            </ul>
            </div>
            <div class = "input-list">
            <ul>
            <li><button type = "button" id = "choice 6"> </button></li>
            <li><button type = "button" id = "choice 7"> </button></li>
            <li><button type = "button" id = "choice 8"> </button></li>
            <li><button type = "button" id = "choice 9"> </button></li>
            <li><button type = "button" id = "choice 10"> </button></li>
            </ul>
            </div>
        </div>

        <div class = "input-wrapper">
        <button type="button" onclick = "test()" id = "submit" >Test</button>
        </div>
    </div>

来自style.css的

   /*input */ 
.input-area
{
    margin:0;
    padding:0;
    background: #2dcc70;
}
.input-wrapper
{
    margin: 0px 50%;
    clear:both;
}
.options
{ 
    width: 100%;
    margin: 5px 0 5px 0;
}
.input-list
{
    display:inline;
    list-style: none;
    float:left;
    margin: 0 3% 0 3%;
}

我已经尝试了一些带有display属性的选项，但完全没有想法...也对一些批评开放

Answer 1

.input-wrapper左右边距为50％，增加到100％。因此，实际内容没有空间，所有内容都被压缩到尽可能小的空间。

我认为你根本不需要保证金。如果您想将文本居中，只需使用：

.input-wrapper {
    text-align: center;
}

但是，我真的不明白你为什么围绕单个元素拥有所有这些div包装器：

h2 {
    text-align: center;
}

您还可以向h2或ul添加类，或将整个内容放入容器中等。

为什么我的h2不能留在一条线上？

1 个答案: