我有一系列嵌套的 div，其中我试图让一段文本“TICKET NAME”溢出到另外两个上。
这是一张不良结果的图片:
这是我的代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div id="game_head">
<div id="timer">
</div>
<div id="flags">
<div id="best_of">
</div>
</div>
<div id="team_1">
<span class="team_name">Team 1</span>
</div>
<div id="ticket">
<span class="versus">VS</span>
<span class="ticket_name">TICKET NAME</span>
</div>
<div id="team_2">
<span class="team_name">Team 2</span>
</div>
</div>
<div id="game_body">
</div>
<body>
</body>
</html>
我的 CSS 看起来像这样:
#game_head {
height: 62px;
width: 555px;
background-color: #CCC;
}
#timer {
height: 100%;
width: 26%;
background-color:#111;
float:left;
}
#flags {
height: 100%;
width: 4%;
background-color:#333;
float:left;
}
#best_of{
height:33%;
background-color:#F00;
}
#team_1 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#team_2 {
height: 100%;
width: 31.5%;
background-color:#999;
float:left;
text-align:center;
display:table;
}
#ticket {
height: 100%;
width: 7%;
background-color:#333;
float:left;
overflow:visible;
}
span.ticket_name{
color:#FFF;
}
span.team_name{
display: table-cell;
vertical-align: middle;
}
span.versus{
color:#F00;
}
我如何才能使“TICKET NAME”文本在“ticket”div 中居中但溢出到“team_1”和“team_2”div 中？
提前致谢!
最佳答案
好吧，您可以将所有 div 设置为绝对 div，然后将票证的 z-index 设置为大于其余部分并使其也比其他部分更宽
关于html - CSS 文本溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16535006/