在輸入下方對齊文本

我有一個文本輸入以及下面的列表。在輸入下方對齊文本

我現在想要列表在左側的輸入下正好開始。

這裏是一個jsFiddle.

CSS/HTML /演示

body { 
 
    text-align: center; 
 
} 
 
#underbox li { 
 
    display: inline-block; 
 
    text-decoration: underline; 
 
}

<input type="text" style="width: 200px;" /> 
 
<ul id="underbox"> 
 
    <li>Test</li> 
 
    <li>Next</li> 
 
</ul>

來源

2014-10-04 enzian

請發表您的HTML和CSS代碼在這裏，併發布您試圖將列表放在您想要的位置。 – 2014-10-04 19:50:24

更改樣式：

body{ 
    text-align: center; 
} 
input { 
    width: 200px; 
} 
ul { 
    text-align: left; 
    margin: 0 auto; 
    padding: 0; 
    width: 200px; 
} 
#underbox li{ 
    display: inline-block; 
    text-decoration: underline; 
}

輸入和ul =>相同寬度/ ul => text-align：center;保證金：0自動（設置位置到中心）;填充：0（禁用默認樣式）; jsfiddle

來源

2014-10-04 20:05:50

是這樣的：

#underbox { 

    width: 200px; 
    margin: 0 auto; 
    padding: 0; 
    list-style-type: none; 

} 
#underbox li { 
    margin-right: 5px; 
    text-decoration: underline; 
    text-align: left; 
    float: left; 

}

來源

2014-10-04 20:44:58 alquist42

嘗試添加樣式一樣，UI元素：http://jsfiddle.net/csdtesting/j6f8L7Lp/

body { 
 
    text-align: center; 
 
} 
 
#underbox li { 
 
    display: inline-block; 
 
    text-decoration: underline; 
 
} 
 
ul#underbox { 
 
    padding: 0; 
 
    list-style-type: none; 
 
    margin: 0; 
 
}

<input type="text" style="width: 200px;" /> 
 
<ul id="underbox"> 
 
    <li>Test</li> 
 
    <li>Next</li> 
 
</ul>

來源

2014-10-04 20:53:37

在輸入下方對齊文本

回答

相關問題