CSS。移動設備上的中心塊

Question

http://jsfiddle.net/2r4bzjqe/

首先，我需要在頁面中心顯示此塊（沒有靜態寬度，因爲它會顯示在各種移動設備上）。

我需要在一條垂直線上顯示這個ul列表，所以第二個li應該在第一個li的同一個地方開始。我無法使用靜態寬度，text-align：left和margin：0 auto，因爲它適用於任何移動設備。

現狀：

Test 

    Test Test 
    Test 
    Test Test 

我需要這個不固定的屏幕寬度：

Test 

    Test Test 
    Test 
    Test Test 

Answer 1

//編輯： 我更新了這個讓你的文本塊父之內，現在中心容器。你將不得不使用一個父容器該解決方案具有以下CSS

.test { 
 
    text-align: left; 
 
    display: inline-block 
 
    
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: relative; 
 
    text-align: center; 
 
}

<div class="container"> 
 
<div class="test"> 
 
    <div> 
 
     Test 
 
    </div> 
 
    <ul> 
 
     <li>Test Test</li> 
 
     <li>Test</li> 
 
     <li>Test Test</li> 
 
    </ul> 
 
</div> 
 
</div>

因爲ul有一個標準的填充你應該刪除

Answer 2

通常應該有一個reset.css首先（重置所有默認元素行爲），我做了最低優先而不是reset.css，然後您可以使用以下css

* {margin:0; padding:0;} /*use reset.css here*/ 

.test { 
    text-align: center; 
} 

ul { 
    list-style: none; 
    text-align:left; 
    display: inline-block; /*this does the trick*/ 
}