我已经在数字框0和10下方添加了文本“非常不可能/非常可能”,如下图所示:https://imgur.com/a/7JZbC92。第一个文本很好(“不太可能”),但“非常可能”文本继续通过数字框,甚至在移动设备上也是如此。我希望它被“修复”,并且永远不要继续通过10格盒。这可能吗?
此外,我想在文本上方添加一些填充,但是“ padding-top”将不起作用。
这是我的文本CSS代码:
#recommend_10::after {
content: "Very likely";
font-size: 11px;
white-space: nowrap;
}
#recommend_0::after {
content: "Very unlikely";
font-size: 11px;
white-space: nowrap;
}
这是按钮的CSS,但我不知道是谁写的:
/* NPS */
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="/customer_files/survey457789/retailrelation.js"></script>
<style>
.starbutton {
border-radius: 5px;
width: 46px;
height: 46px;
display: inline-block;
background-color: rgb(200, 200, 200);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
line-height: 46px;
color: white;
text-decoration: none;
font-weight: bolder;
font-family: Verdana;
font-size: 20px;}
.starWrapper, .starWrapperTen {
width: 52px;
height: 46px;
float: left;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;}
#recommendToFriend {
width: 600px;}
@media (max-width: 599px) {
.starWrapperTen {
width: 24px;}
.starWrapperTen .starbutton {
width: 22px;
font-size: 15px;
height: 41px;
line-height: 41px;}
#recommendToFriend {
width: 265px;}
}
.header {
font-weight: bold;
text-align: left;}
.closed-horizontal .choice-headers TD {
font-size: medium;}
.review {
margin: 0 auto;
min-width: 265px;
width: 265px;
padding-bottom: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
height: 150px;}
.description {
margin-left: 10px;
display: inline-block;
height: 30px;}
.terms {
font-size: 11px;
padding-top: 20px;}
.hideme {
display:none;
visibility:hidden;}
.h1 {
font-size: 32px; }
.restriction{
font-size: 14px;}
.question-title{
font-weight: bold; }
.customHeader,
.page0 .question-title{
font-size: 18px;
font-weight: bold;}
这是HTML-但我自己不能真正访问或修改它:
<div class="review" id="recommendToFriend">
<p class="header">On a scale of zero to 10, with 10 being highest, what’s the likelihood that you would recommend us (our company) to a friend or colleague?</p>
<div class="starWrapperTen" id="recommend_0"><a class="starbutton" href="#" style="background-color: rgb(229, 2, 0);">0</a></div>
<div class="starWrapperTen" id="recommend_1"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">1</a></div>
<div class="starWrapperTen" id="recommend_2"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">2</a></div>
<div class="starWrapperTen" id="recommend_3"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">3</a> </div>
<div class="starWrapperTen" id="recommend_4"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">4</a></div>
<div class="starWrapperTen" id="recommend_5"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">5</a></div>
<div class="starWrapperTen" id="recommend_6"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">6</a></div>
<div class="starWrapperTen" id="recommend_7"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">7</a></div>
<div class="starWrapperTen" id="recommend_8"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">8</a> </div>
<div class="starWrapperTen" id="recommend_9"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">9</a></div>
<div class="starWrapperTen" id="recommend_10"><a class="starbutton" href="#" style="background-color: rgb(200, 200, 200);">10</a></div>
<p id="recommend_description" class="description"></p></div>
我对HTML的了解不足,不足以解决这个问题,但是我认为这是代码的相关部分:https://imgur.com/a/Oib8y5p
谢谢!
答案 0 :(得分:2)
尝试使用类似这样的内容:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
line-height: 1.2;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container__inner {
display: flex;
align-items: center;
position: relative;
}
.container__inner::before,
.container__inner::after {
font-size: 12px;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-weight: 500;
white-space: nowrap;
}
.container__inner::before {
content: "Very unlikely";
right: calc(100% + 15px);
}
.container__inner::after {
content: "Very likely";
left: calc(100% + 15px);
}
.container__item {
width: 50px;
height: 50px;
background: #c8c8c8;
border-radius: 4px;
margin-right: 12px;
font-size: 20px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.container__item:last-of-type {
margin-right: 0;
}
.container__item_active {
background: #e50200;
}
<div class="container">
<div class="container__inner">
<div class="container__item container__item_active">1</div>
<div class="container__item">2</div>
<div class="container__item">3</div>
<div class="container__item">4</div>
<div class="container__item">5</div>
<div class="container__item">6</div>
<div class="container__item">7</div>
<div class="container__item">8</div>
<div class="container__item">9</div>
<div class="container__item">10</div>
</div>
</div>