跨度跳转到新行,即使它有内联块?

时间:2017-01-30 09:12:30

标签: html css

所以我多次读过display:inline-block;你的跨度将解决它。但我无法让它为我工作。可能我只是错过了一些东西,但我希望得到帮助。

<html>
    <head>
        <style>
            @font-face {
                font-family:myRobotoRegular;
                src:url(fonts/Roboto-Regular.ttf);
            }
            @font-face {
                font-family:myRobotoBold;
                src:url(fonts/Roboto-Bold.ttf);
            }
            @font-face {
                font-family:myRobotoLight;
                src:url(fonts/Roboto-Light.ttf);
            }
            body {
                background-color:black;
                color:white;
            }
            h1 {
                font-family:myRobotoBold;
                text-align:center;
            }
            .right {
                float:right;
                width:49%;
            }
            .individual {
                height:100%;
                margin:0 auto;
                overflow-y:scroll;
                padding-right:10px;
                text-align:left;
                width:440px;
            }
            .bannerGreen {
                background-color:#0D731D;
                padding:10px;
            }
            .bannerTitle {
                font-family:myRobotoBold;
            }
            .bannerRarity {
                font-family:myRobotoLight;
            }
            .description {
                background-color:black;
                font-family:myRobotoRegular;
                padding:20px 10px 10px 10px;
            }
            .quotes {
                color:#C0B9A7;
            }
            .orangeStat {
                color:#F26A1C;
                display:inline-block;
                font-family:myRobotoBold;
                font-size:20px;
            }
            .yellowStat {
                color:#FFD30B;
                display:inline-block;
                font-family:myRobotoBold;
                font-size:20px;
            }
            .imgDiv {
                float:right;
                margin-top:-10px;
            }
            .img {
                height:58px;
            }
        </style>
    </head>
    <body>
        <div class="mainDiv">
            <div class="right">
                <div class="individual">
                    <h1>
                        CATEGORY
                    </h1>
                    <div class="bannerGreen">
                        <div class="imgDiv">
                            <img class="img" src="">
                        </div>
                        <span class="bannerTitle">
                            TITLE
                        </span>
                        <br>
                        <span class="bannerRarity">
                            SUBTITLE
                        </span>
                    </div>
                    <div class="description">
                        DESCRIPTION
                        <span class="yellowStat">
                            STATISTICS
                        </span>
                        DESCRIPTION
                        <span class="orangeStat">
                            A STATISTIC
                        </span>.
                    </div>
                    <br>
                </div>
            </div>
        </div>
    </body>
</html>

“A STATISTIC”中的“A”应该能够位于第一行,而是沿着整个跨度到达第二行。

(如果你认识到这一点可以获得奖励。;))

编辑:内联而不是内联块肯定会解决问题,但是.orangeStat跨度之后的时间段会从跨度中跳出。而且我希望它不要跳开,但我也不希望它被包含在跨度中。有办法实现吗?

2 个答案:

答案 0 :(得分:1)

好吧,如果您希望单独处理A和STATISTIC,那么您应该将它们放在单独的(内联)块元素中:

127.0.0.1 - - [30/Jan/2017:11:33:19 +0300] "GET /appcenterconsole/console.html HTTP/1.1" 200 1030
127.0.0.1 - - [30/Jan/2017:11:33:20 +0300] "GET /appcenterconsole/dojo/appcenter/templates/Main.html HTTP/1.1" 200 1509
127.0.0.1 - - [30/Jan/2017:11:33:20 +0300] "GET /appcenterconsole/services?action=endpoint HTTP/1.1" 200 66
127.0.0.1 - - [30/Jan/2017:11:33:20 +0300] "GET /appcenterconsole/dojo/appcenter/templates/ApplicationsList.html HTTP/1.1" 200 2224
127.0.0.1 - - [30/Jan/2017:11:33:20 +0300] "GET /appcenterconsole/services/service/userAndConfigInfo?request.preventCache=1485765200702 HTTP/1.1" 500 -
127.0.0.1 - - [30/Jan/2017:11:33:20 +0300] "GET /appcenterconsole/services/service/directory?pageSize=15&fromIndex=0&orderBy=label&isActive=any&isInstaller=any&isRecommended=any&isReadyForProd=any&isRTWAnnotated=any&isAppLink=any&request.preventCache=1485765200896 HTTP/1.1" 500 -
127.0.0.1 - - [30/Jan/2017:11:33:26 +0300] "GET /appcenterconsole/console.html HTTP/1.1" 200 1030
127.0.0.1 - - [30/Jan/2017:11:33:26 +0300] "GET /appcenterconsole/dojo/appcenter/templates/Main.html HTTP/1.1" 200 1509
127.0.0.1 - - [30/Jan/2017:11:33:26 +0300] "GET /appcenterconsole/services?action=endpoint HTTP/1.1" 200 66
127.0.0.1 - - [30/Jan/2017:11:33:26 +0300] "GET /appcenterconsole/dojo/appcenter/templates/ApplicationsList.html HTTP/1.1" 200 2224
127.0.0.1 - - [30/Jan/2017:11:33:26 +0300] "GET /appcenterconsole/services/service/userAndConfigInfo?request.preventCache=1485765206923 HTTP/1.1" 500 -
127.0.0.1 - - [30/Jan/2017:11:33:27 +0300] "GET /appcenterconsole/services/service/directory?pageSize=15&fromIndex=0&orderBy=label&isActive=any&isInstaller=any&isRecommended=any&isReadyForProd=any&isRTWAnnotated=any&isAppLink=any&request.preventCache=1485765207144 HTTP/1.1" 500 -
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole HTTP/1.1" 302 -
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/libs/requirejs/require.min.js HTTP/1.1" 200 7390
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/index.html HTTP/1.1" 302 -
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /favicon.ico HTTP/1.1" 404 270
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/login.html HTTP/1.1" 200 3261
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/libs/requirejs-dplugins/i18n.js HTTP/1.1" 200 1880
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/libs/mf-ui-css-foundation/dist/styles/extensions/header.css HTTP/1.1" 200 504
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/css/login.css HTTP/1.1" 200 1837
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/js/login/login.js HTTP/1.1" 200 1259
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/locale HTTP/1.1" 200 18
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/libs/requirejs-dplugins/i18n.js HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/libs/requirejs-dplugins/i18n/build.js HTTP/1.1" 200 1187
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/libs/requirejs-dplugins/i18n/common.js HTTP/1.1" 200 1036
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/libs/requirejs-dplugins/i18n/parentLocale.js HTTP/1.1" 200 429
127.0.0.1 - - [30/Jan/2017:11:42:07 +0300] "GET /worklightconsole/201602212243/js/login/nls/login.js HTTP/1.1" 200 737
127.0.0.1 - - [30/Jan/2017:11:42:21 +0300] "GET /worklightconsole/201602212243/css/login.css HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:42:21 +0300] "GET /worklightconsole/201602212243/libs/mf-ui-css-foundation/dist/styles/extensions/header.css HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "POST /worklightconsole/j_security_check HTTP/1.1" 302 -
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/index.html HTTP/1.1" 200 1640
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/201602212243/css/app-layer.css HTTP/1.1" 200 6462
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/201602212243/js/main.js HTTP/1.1" 200 46380
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/locale HTTP/1.1" 200 18
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/201602212243/js/css/layer.css HTTP/1.1" 200 7585
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/201602212243/js/nls/main_root.js HTTP/1.1" 200 7225
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/201602212243/libs/angular-layer.min.js HTTP/1.1" 200 75558
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/services?action=endpoint HTTP/1.1" 200 59
127.0.0.1 - - [30/Jan/2017:11:42:44 +0300] "GET /worklightconsole/services?action=userinfo HTTP/1.1" 200 85
127.0.0.1 - - [30/Jan/2017:11:42:43 +0300] "GET /worklightconsole/services/management-apis/1.0/loginAudit HTTP/1.1" 500 -
127.0.0.1 - - [30/Jan/2017:11:42:44 +0300] "GET /worklightconsole/services/management-apis/1.0/runtimes?fullInfo=true HTTP/1.1" 500 -
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/index.html HTTP/1.1" 200 1640
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/201602212243/css/app-layer.css HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/201602212243/libs/requirejs/require.min.js HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/201602212243/js/main.js HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/locale HTTP/1.1" 200 18
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/201602212243/js/css/layer.css HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/201602212243/libs/angular-layer.min.js HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/201602212243/js/nls/main_root.js HTTP/1.1" 304 -
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/services?action=endpoint HTTP/1.1" 200 59
127.0.0.1 - - [30/Jan/2017:11:53:29 +0300] "GET /worklightconsole/services?action=userinfo HTTP/1.1" 200 85
127.0.0.1 - - [30/Jan/2017:11:53:28 +0300] "GET /worklightconsole/services/management-apis/1.0/loginAudit HTTP/1.1" 500 -
127.0.0.1 - - [30/Jan/2017:11:53:29 +0300] "GET /worklightconsole/services/management-apis/1.0/runtimes?fullInfo=true HTTP/1.1" 500 -

(编辑):

使用<span class="orangeStat"> A </span> <span class="orangeStat"> STATISTIC </span> 代替inline并删除STATISTIC和句点之间的空格,尝试以下方法:

inline-block

答案 1 :(得分:0)

增加外部容器的宽度

.individual {
    width: 490px;
}

这些词出现在第二行,因为容器中没有任何空间。

减少yellowStat和orangeStat

的字体大小