div边框样式的CSS边距样式

时间：2015-08-17 11:21:40

标签： css

您好我一直在垃圾邮件谷歌浏览器中的开发工具尝试添加边距到我的导航栏。预期的想法是使边距允许我在框之间创建间隙。任何帮助表示赞赏！

http://jsfiddle.net/3jp1d0fe/8/

CSS 

div.container {
    display: table;
    display: table-row;
}
div.column {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:#c2ad80;
}
div.column a {
    color:white;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
    display:block;
    height:100px;
    width:100px;
    display: table-cell;
    vertical-align: middle;
}
div.column.current, div.column:hover {
    background-color: #a2884f;
}

HTML 

<div class="container">
    <div class="column"><a href="/sites/SharePointSDLC/SitePages/Solution%20Assessment.aspx"> Solution Assessment</a></div>
    <div class="column"><a href="/sites/SharePointSDLC/SitePages/Design.aspx"> Design</a></div>
    <div class="column"><a href="/sites/SharePointSDLC/SitePages/Build.aspx"> Build</a></div>
    <div class="column"><a href="/sites/SharePointSDLC/SitePages/Deploy.aspx"> Deploy</a></div>
    <div class="column"><a href="/sites/SharePointSDLC/SitePages/Test.aspx"> Test</a></div>
    <div class="column"><a href="/sites/SharePointSDLC/SitePages/Live.aspx"> Live (BAU)</a></div>
</div>

JS 

$(function () {
    url = location.pathname.substr(1);
    $('a[href*="' + url + '"]').closest(".column").addClass("current");
});

$(".column a").click(function () {
    $(".current").removeClass("current");
    $(this).closest(".column").addClass("current");
    return false;
});

3 个答案:

答案 0 :(得分：1)

margin

  

适用于除

标题，表和内联表之外的表格显示类型的元素之外的所有元素。它也适用于:: first-letter。

Source - MDN

您可以使用border-spacing代替`margin`` 

div.container {
    display: table;
    display: table-row;
    /* Added */
    border-collapse:separate;
    border-spacing:5px;
}

div.column {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:#c2ad80;
    /* Added */
    border:2px solid white;
}

<强>段 

$(function () {
    url = location.pathname.substr(1);
    $('a[href*="' + url + '"]').closest(".column").addClass("current");
});

$(".column a").click(function () {
    $(".current").removeClass("current");
    $(this).closest(".column").addClass("current");
    return false;
});
div.container {
    display: table;
    display: table-row;
    border-collapse:separate;
    border-spacing:5px;
}
div.column {
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:#c2ad80;
    /* Added */
    border: 2px solid white;
}
div.column a {
    color:white;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
    display:block;
    height:100px;
    width:100px;
    display: table-cell;
    vertical-align: middle;
    
}
div.column.current, div.column:hover {
    background-color: #a2884f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a>

        </div>
        <div class="column"><a href="https://www.google.co.uk"> Design</a>

        </div>
        <div class="column"><a href="https://www.google.co.uk"> Build</a>

        </div>
        <div class="column"><a href="https://www.google.co.uk"> Deploy</a>

        </div>
        <div class="column"><a href="https://www.google.co.uk"> Test</a>

        </div>
        <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a>

        </div>
    </div>
</body>

答案 1 :(得分：1)

试试这可能对你有帮助.. 

$(function () {
    url = location.pathname.substr(1);
    $('a[href*="' + url + '"]').closest(".column").addClass("current");
});

$(".column a").click(function () {
    $(".current").removeClass("current");
    $(this).closest(".column").addClass("current");
    return false;
});
div.container {
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
}
div.column {
    display: table-cell;
    border-spacing: 10px;
    vertical-align:middle;
    text-align:center;
    background-color:#c2ad80;
    
}
div.row { display:table-row; }
div.column a {
    color:white;
    font-family: Arial;
    font-size: 12px;
    text-decoration:none;
    display:block;
    height:100px;
    width:100px;
    display: table-cell;
    vertical-align: middle;
    
}
div.column.current, div.column:hover {
    background-color: #a2884f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="row">
          <div class="column"><a href="https://www.google.co.uk"> Solution Assessment</a>

          </div>
          <div class="column"><a href="https://www.google.co.uk"> Design</a>

          </div>
          <div class="column"><a href="https://www.google.co.uk"> Build</a>

          </div>
          <div class="column"><a href="https://www.google.co.uk"> Deploy</a>

          </div>
          <div class="column"><a href="https://www.google.co.uk"> Test</a>

          </div>
          <div class="column"><a href="https://www.google.co.uk"> Live (BAU)</a></div>
        </div>
    </div>
</body>

答案 2 :(得分：1)

就是这样，我更改为使用background-color代替a代替.column，然后将padding添加到.column，然后将悬停效果添加到.column a .column代替div.container { display: table; display: table-row; } div.column { display: table-cell; vertical-align:middle; text-align:center; padding: 2px; } div.column a { color:white; font-family: Arial; font-size: 12px; text-decoration:none; display:block; height:100px; width:100px; display: table-cell; background-color:#c2ad80; vertical-align: middle; } div.column.current a, div.column a:hover { background-color: #a2884f; } 

arrayType

Fiddle

相关问题
最新问题