Question

我想创建一个仅包含页面标题的标题栏。我希望“ a”项不是div的整个宽度（整个网页的宽度），而只是文本的宽度。这是一张现在的样子的照片。问题图片：
我该怎么办？
我应该使用2个div吗？

HTML：

<!doctype html>
<html>
<body margin = "0">
    <div id='titlebar'>
        <a href='/'>Dimitrie David</a>
    </div>
</body>
<html>

CSS：

#titlebar {
    background: #333333;
}
#titlebar a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 20px 25px 15px 25px;
    font-weight: 700;
    font-size: 30px;
}

Answer 1

从display: block中删除#titlebar a。默认情况下，内联元素中的a标记应仅与其内容一样宽。默认情况下，块元素的宽度为100%。

Answer 2

尝试给它一个相对宽度，例如宽度：20％（使用准确数字计算）。具有相对宽度（或高度）的元素将是父元素的宽度/高度的百分比。

Answer 3

#titlebar {
    display: inline-block;
}

与display：block相比，主要区别在于display：inline-block不会在元素后添加换行符，因此该元素可以位于其他元素旁边。来自W3schools

Answer 4

使用display：inline-block代替display：block

$(document).ready( function() {
    $("#load_p1").on("click", function() {
        $("#content").load("p1.html");
    });

    $("#load_p2").on("click", function() {
        $("#content").load("p2.html");
    });

    $("#load_p3").on("click", function() {
        $("#content").load("p3.html");
    });

    $("#load_p4").on("click", function() {
        $("#content").load("p4.html");
    });
});

使div的“ a”项不等于div的全宽

4 个答案: