所以我多次读过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跨度之后的时间段会从跨度中跳出。而且我希望它不要跳开,但我也不希望它被包含在跨度中。有办法实现吗?答案 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
的字体大小