css - 中心水平菜单项

任何帮助将不胜感激。我已经创建了代码的jsfiddle - http://jsfiddle.net/dfo44q7f/css - 中心水平菜单项

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Untitled</title> 
</head> 
<body> 
<ul class="nav"> 
    <li><a href="/">Menu1</a></li> 
    <li><a href="/Menu2/">Menu2</a></li> 
    <li><a href="/Menu3/">Menu3</a></li> 
</ul> 
</body> 
</html>

我如何？

居中文中的李？

来源

2015-11-12 Lacer

文本居中在列表元素中。它看起来并不像它，因为你在左边放了很多填充。 – timgvandijk

改变填充于：

.nav a

为：

padding: 10px 0 10px 0;

或：

padding: 10px 40px 10px 40px;

第二个值是为右填充和第四为左填充如果你想让它居中，你将不得不将它们设置为相同的值。

来源

2015-11-12 19:35:44

感谢所有人的回答。我更新了代码.. http://jsfiddle.net/dfo44q7f/3/我的问题是如何在菜单项的左侧和右侧添加填充而不更改文本下方底部边框的宽度？ – Lacer

@Lacer你将不得不添加填充左右，在这里我修改了填充http://jsfiddle.net/dfo44q7f/4/ –

css - 中心水平菜单项

回答

相关问题