如何保持表單及其子女居中，但我的文字輸入的左上角有一個標籤？

好的，所以也許我沒有正確地搜索，但我似乎無法找到正好我在找什麼。我有一個表格，讓我們說這樣的事情：如何保持表單及其子女居中，但我的文字輸入的左上角有一個標籤？

div.some_form {} 
 

 
div.some_form>span { 
 
    font-weight: bold; 
 
    position: relative; 
 
    text-align: left; 
 
} 
 

 
div.some_form>form { 
 
    text-align: center; 
 
    font-size: 16px; 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
div.some_form>form>input.txtfield { 
 
    padding: 13px; 
 
    width: 25%; 
 
} 
 

 
.button { 
 
    background-color: #7AB55C; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 15px 32px; 
 
}

<div class="some_form"> 
 
    <form> 
 
    <span class="some_class">Some text</span> 
 
    <br> 
 
    <input type="text" class="txtfield" /> 
 
    <input type="button" class="button" value="Submit" onclick="doSomething()" /> 
 
    </form> 
 
</div>

我想要它做的是相當多保持居中輸入（這我能做到），這是爲什麼一切都在div中，我用text-align：center來居中放置所有東西，但我希望span元素被卡在第一個輸入的左上角，這似乎無法做到。我的意思是，我知道了，但是一旦我調整了窗口大小，跨度就會射入空間（即文本字段將以比跨度更低的速率擴展，這非常棒，因爲即使使用按鈕，文本仍保持居中附加），我似乎無法讓它堅持下去。（也認真這不是作業，我只是進入CSS，這真的很困擾我..）

任何幫助顯然非常感激！感謝提前:)

來源

2017-05-05 sb_zero_nine

添加display: block您span會工作。並刪除<br />。你的類規範是錯誤的。 <span>不是那裏的直接孩子。所以>不起作用：

body { 
 
    text-align: center; 
 
} 
 
div.some_form span.some_class { 
 
    font-weight: bold; 
 
    position: relative; 
 
    text-align: left; 
 
    display: block; 
 
    padding: 0 4.5%; 
 
} 
 

 
div.some_form>form { 
 
    text-align: center; 
 
    font-size: 16px; 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
div.some_form>form>input.txtfield { 
 
    padding: 13px; 
 
    width: 45%; 
 
} 
 

 
.button { 
 
    background-color: #7AB55C; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 15px 32px; 
 
} 
 
div.some_form { 
 
    display: inline-block; 
 
}

<div class="some_form"> 
 
    <form> 
 
    <span class="some_class">Some text</span> 
 
    <input type="text" class="txtfield" /> 
 
    <input type="button" class="button" value="Submit" onclick="doSomething()" /> 
 
    </form> 
 
</div>

預覽

來源

2017-05-05 08:50:27

感謝您的幫助！我選擇你作爲答案，因爲它的作品，你解釋了爲什麼:) –

這裏的答案希望它可以幫助你

 .container{ 
 
\t \t \t width: 300px; 
 
\t \t \t height: 200px; 
 
\t \t \t position: absolute; 
 
\t \t \t left: 50%; 
 
\t \t \t top: 50%; 
 
\t \t \t margin-top: -100px; 
 
\t \t \t margin-left: -150px; 
 
\t \t } 
 
\t \t .txtfield { 
 
\t \t padding: 13px; 
 
\t \t width: 25%; 
 
\t \t } 
 

 
\t \t .button { 
 
\t \t background-color: #7AB55C; 
 
\t \t border: none; 
 
\t \t color: white; 
 
\t \t text-align: center; 
 
\t \t padding: 15px 32px; 
 
\t \t }

<div class="some_form"> 
 
\t <form> 
 
\t \t <div class="container"> 
 
\t \t  <span class="some_class">Some text</span> 
 
\t \t  <div class="input_container"> 
 
\t \t \t  <input type="text" class="txtfield" /> 
 
\t \t \t  <input type="submit" class="button" value="Submit" onclick="doSomething()" /> 
 
\t \t  </div> 
 
\t  </div> 
 
\t </form> 
 
\t </div>

來源

2017-05-05 04:57:37

如何保持表單及其子女居中，但我的文字輸入的左上角有一個標籤？

回答

相關問題