gpt4 book ai didi

html - CSS 文本溢出

转载 作者:行者123 更新时间:2023-11-28 12:55:44 24 4
gpt4 key购买 nike

我有一系列嵌套的 div,其中我试图让一段文本“TICKET NAME”溢出到另外两个上。

这是一张不良结果的图片:

enter image description here

这是我的代码:

<!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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com