Question

＆＃13;

    .side-bar{
        background-color: red; 
    }
    @media (min-width: 768px){
        .side-bar{
            z-index:10;
            position:absalute;
            width:220px;
            padding-top:60px;
            height:100%;
            top:0;
            position:fixed;

    }
    }
    @media (min-width: 768px){
        .top-left-part{
            width:220px;
            position:fixed;
            z-index: 11;
            top: 0;
        }
    }
    /*---------------top left part starts here------------*/
    .top-left-part{
        width:220px;
        float:left;
        background-color: #ffffff;
    }
    .top-left-image{
        float: left;
        height: 50px;
        width: 50px;
        padding-left: 1.3px;
        padding-right: 10px;
        padding-top: 10px;
    }
    .left-top-text{
        padding-top:300px;
        font-size: 30px;
       /* float: right;*/
        /*margin-left: 10px;*/
    }
    .text-admin{
        /*padding-left: 20px;*/

    }
    /*---------------top left part ends here--------------*/

＆＃13;

<html>
    <head>
        <link rel="stylesheet" href="css/elite.css" type="text/css">
        <script src="js/elite.js">
        </script>
    </head>
    <body>
        <div id="top-bar">
            <div class="top-left-part">
                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>
                <span class="left-top-text text-elite">elite </span>
                <span class="left-top-text text-admin">admin</span>
            </div>
        </div>
        <div id="bottom-part">
            <div id="left-side-bar" class="side-bar">

            </div>
            <div id="right-side-container">
            </div>
        </div>
    </body>
</html>

＆＃13;

我对css没有太多经验，这就是为什么我＆＃39;问这个问题。在这个css代码中有一个名为＆＃34; left-top-text＆＃34;和＆＃34; padding-top＆＃34;此类的属性，但不适用于任何值。任何人都可以帮我解决这个问题吗？

Answer 1

添加display:inline-block

.left-top-text {
    display: inline-block;/*add this property;*/
    font-size: 30px;
    padding-top: 300px;
}

Answer 2

＆＃13;

.side-bar{
        background-color: red; 
    }
    @media (min-width: 768px){
        .side-bar{
            z-index:10;
            position:absalute;
            width:220px;
            padding-top:60px;
            height:100%;
            top:0;
            position:fixed;

    }
    }
    @media (min-width: 768px){
        .top-left-part{
            width:220px;
            position:fixed;
            z-index: 11;
            top: 0;
        }
    }
    /*---------------top left part starts here------------*/
    .top-left-part{
        width:220px;
        float:left;
        background-color: #ffffff;
    }
    .top-left-image{
        float: left;
        height: 50px;
        width: 50px;
        padding-left: 1.3px;
        padding-right: 10px;
        padding-top: 10px;
    }
    .left-top-text{
        padding-top:300px;
        font-size: 30px;
      display:block;
      float:left;
       /* float: right;*/
        /*margin-left: 10px;*/
    }
    .text-admin{
        /*padding-left: 20px;*/

    }
    /*---------------top left part ends here--------------*/

＆＃13;

<html>
    <head>
        <link rel="stylesheet" href="css/elite.css" type="text/css">
        <script src="js/elite.js">
        </script>
    </head>
    <body>
        <div id="top-bar">
            <div class="top-left-part">
                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>
                <span class="left-top-text text-elite">elite </span>
                <span class="left-top-text text-admin">admin</span>
            </div>
        </div>
        <div id="bottom-part">
            <div id="left-side-bar" class="side-bar">

            </div>
            <div id="right-side-container">
            </div>
        </div>
    </body>
</html>

＆＃13;

Answer 3

由于<span>是内联元素，因此顶部和底部填充不会被应用。

如果添加display: inline-block;，将在块元素上应用填充，而不从文本流中删除元素。

阅读本文以获取更多信息： https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

Answer 4

可能会使用float:left;

 .left-top-text{
      float:left;
      background:red;
        padding-top:300px;
        font-size: 30px;
    }

填充不能正常工作？

4 个答案: