填充或保证金问题？

时间：2014-04-15 18:17:43

标签： html css

我非常喜欢http://designmodo.com/在导航中模拟3D边框的方式，所以我试图在我的网站中重新创建它。但是，在我的网站上，nav中的右边界和左边界没有相互接触，而是被一个小空间隔开。我该如何解决这个问题？

感谢您的时间。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/1140.css">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

</head>
<body>
    <div class="head">
        <!-- Logo goes here -->
        <div class="container12">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Departments</a></li>
                <li><a href="#">Library</a></li>
                <li><a href="#">More</a></li>
            </ul>
        </nav>
        </div>
    </div>
    <div class="headFix"></div>
    <div class="info">

    </div>
    <footer>
        <div class="container12">

        </div>
    </footer>
</body>
</html>

CSS：

.head { /* preffered color is blackish:#2E3234 or  blue:#245789*/
    display: block;
    clear: none;
    background-color: #446CB3;
    height: 75px;
    width: 100%;
    position: fixed;
    z-index: 2;
    margin: 0;
    padding: 0;
}

nav {
    float: right;
    font-size: 16px;
    display: block;
    padding: 0;
    margin: 0;
}
nav a:link, nav a:visited {
    border-left: 1px solid #587BBA;
    border-right: 1px solid #3D61A1;
    text-decoration: none;
    color: #E4EBF0;
    display: inline-block;
    height: 23px;
    padding: 26px 15px;
    text-align: center;
    letter-spacing: 1px;
    -o-transition: .2s ease-in-out; 
    -moz-transition:.2s ease-in-out;
    -webkit-transition:.2s ease-in-out;
    transition: .2s ease-in-out; 
}
nav a:hover, nav a:active {
    background-color: #fff;
    color: #446CB3;
}
nav li {
    display: inline;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Example Fiddle

2 个答案:

答案 0 :(得分：2)

正在进行什么

当您使用display:inline-block时，您会告诉某个元素在设计方面的行为类似于block元素，并且就展示位置而言，就像inline元素一样。元素之间的间距属于展示位置或inline部分。

CSS和inline-block元素有一个奇怪的怪癖，如果你在HTML代码文件中的元素之间有换行符，你会在结果中看到它们之间的空格。你有几种方法可以解决这个问题。

方法1 - 删除HTML文件

中的换行符

保留CSS原样，并更改HTML文件。虽然可以制作丑陋的HTML。

原始HTML：

<li><a href="#">Home</a></li>
<li><a href="#">Departments</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">More</a></li>

新HTML：

<li><a href="#">Home</a></li><li><a href="#">Departments</a></li><li><a href="#">Library</a></li><li><a href="#">More</a></li>

Example Fiddle

结果

enter image description here

方法2 - 使用Float代替Inline-Block

您可以保持HTML结构不变，并使用float:left使内容水平排列。

原始CSS：

nav li {
    display:inline-block;
}

新CSS：

nav li {
    float:left;
}

Example Fiddle

结果

enter image description here

外围边界

如果您注意到，两种方法都没有外边的双边框。我们可以通过提供与ul具有相反颜色的li边框来添加此内容。但是，如果我们使用方法2，则必须将ul设置为display:inline-block以降低边框。

使用此方法（另外）方法2或1.

原始CSS：

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

新CSS：

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid #3D61A1;
    border-right: 1px solid #587BBA;
    display:inline-block;
}

Example Fiddle

结果

enter image description here

答案 1 :(得分：1)

CSS：

nav li {
  float: left;
}

JSFIDDLE

相关问题
最新问题