在頁面上居中顯示我的ul元素，而不會丟失子彈點

我正在嘗試將中心的ul元素放在一行中，而不會丟失子彈點。在頁面上居中顯示我的ul元素，而不會丟失子彈點

我想這兩個UI元素放置在頁面的中間。我嘗試過各種CSS方法，但我仍然無法完成它的工作。

.list li { 
 
    float: left; 
 
    list-style-position: inside; 
 
    list-style-type: disc; 
 
    margin-right: 1em; 
 
}

<ul class="list"> 
 
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li> 
 
    <li>© <?php echo date('Y'); ?> | All rights reserved</li> 
 
</ul>

來源

2017-08-19 Viteazul

修復它

.list{ text-align: center; } 
 
.list li 
 
    { 
 
     display: inline; 
 
     margin-right: 1em; 
 
    } 
 
    .list li:before { 
 
     content: '\2022'; 
 
     margin-right: 0.5em; 
 
     color: red; 
 
    }

<ul class="list"> 
 
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li> 
 
    <li>© <?php echo date('Y'); ?> | All rights reserved</li> 
 
</ul>

來源

2017-08-19 21:47:54

它作品謝謝 – Viteazul

要居中與CSS元素，應提供一些的寬度，在這種情況下100％。

ul { 
    width: 100%; 
    text-align: center; 
}

如果這是不行的，可能還有另一種包裝DIV避免這種屬性，你應該在這裏發表您整個代碼。

提供給我們一個MCVE example，歡迎來到stackoverflow！

來源

2017-08-19 21:10:06

這沒有奏效。我將發佈我的代碼的其餘部分 – Viteazul

好的，你是否也插入了text-align：center？ –

我做了，但無濟於事 – Viteazul

您可以設置ul容器的width（否則它沒有寬度，因爲它的所有子元素都是浮動元素）。

一旦容器寬度你可以使用margin: 0 auto;使其居中：選擇前

：

.list { 
 
    margin: 0 auto; 
 
    width: 330px; 
 
} 
 
.list li 
 
{ 
 
    float: left; 
 
    list-style-position: inside; 
 
    list-style-type: disc; 
 
    margin-right: 1em; 
 
}

<ul class="list"> 
 
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li> 
 
    <li>2018 | All rights reserved</li> 
 
</ul>

來源

2017-08-19 21:11:16 Dekel

它工作正常，當我增加寬度大小爲600px例如，但它仍然沒有正確的居中到頁面。當我試圖做寬度：100％時，它將元素移回左邊 – Viteazul

爲什麼你需要將大小增加到600px？內容的寬度不是600px ...您應該在那裏放置容器的確切寬度。 – Dekel

當我把330像素，它的中心，但第二顆子彈去下面的行。 – Viteazul

使用試試這個

.list { 
    position: relative; 
    float: left; 
    left: 50%; 
    margin: 0 auto; 
    padding: 0; 
} 



li { 
    position: relative; 
    float: left; 
    right: 50%; 
    margin-right: 10px; 
    padding: 5px 10px; 
    background: #fff; 
    list-style: disc; 
}

來源

2017-08-19 21:25:45 FCodex

使用::before

ul { 
 
    text-align: center; 
 
} 
 

 
.list li 
 
{ 
 
    display: inline; 
 
} 
 

 
.list li::before { 
 
    content: '•'; 
 
    margin: 0px 0.3rem; 
 
}

<ul class="list"> 
 
    <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li> 
 
    <li>© <?php echo date('Y'); ?> | All rights reserved</li> 
 
</ul>

來源

2017-08-19 22:06:18

它的工作表示感謝 – Viteazul

在頁面上居中顯示我的ul元素，而不會丟失子彈點

回答

相關問題