Question

为什么灯、安全带、汽油、发动机和锁不是内联的？
我尝试放置 style: inline-block 但相同
我不知道我能做什么，我尝试了很多东西，但都是徒劳的。

            function update_speed(speed, maxspeed) {
                if (speed > maxspeed) maxspeed = speed;
                if (speed < 50) {
                    document.querySelector("#speedBar").style = "border-bottom-color: green; border-right-color: green;";
                }

                if (speed > 50 && speed < 100) {
                    document.querySelector("#speedBar").style = "border-bottom-color: yellow; border-right-color: yellow;";
                }

                if (speed > 100) {
                    document.querySelector("#speedBar").style = "border-bottom-color: red; border-right-color: red;";
                }

                document.querySelector("#speedBar").style.transform = `rotate(${45 + (parseInt(speed) / parseInt(maxspeed)) * 100 * 1.8}deg)`;
                document.getElementById("speedText").innerHTML = speed;
            }

            function update_gas(gas) {
                document.querySelector("#gas span").style.height = parseInt(gas) + "%";
            }

            function updateaza_usi(value) {
                if (value == 0) {
                    document.getElementById("lock").style.background = "#af0000";
                } else {
                    document.getElementById("lock").style.background = "green";
                }
            }

            function update_engine(value) {
                if (value == 0) {
                    document.getElementById("engine").style.background = "#af0000";
                } else {
                    document.getElementById("engine").style.background = "green";
                }
            }

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  position: relative;
  height: 100vh;
  user-select: none;
}

.global {
  display: none;
}

.app {
  position: absolute;
  right: 2.5em;
  top: 0;
  margin-top: 46.5%;
}

@media (max-height: 1077px) {
  .app {
    margin-top: 45.5%;
  }
}

.round-progress {
  position: relative;
  text-align: center;
}

.round-overflow {
  position: relative;
  width: 200px;
  height: 100px;
  margin-bottom: -25px;
  overflow: hidden;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 9px solid #bdbdbd;
  transition: all 0.1s linear;
}

.round-info {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: 50%;
  padding: 1%;
  transform: translateX(-50%);
}

.icon {
  position: relative;
  padding: 10px 8px;
  margin: 10px 12px 0 5px;
  width: 15px;
  height: 10px;
  border-radius: 100px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}
.icon i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 11;
  font-size: 15px;
}
.icon span {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 100%;
  height: 100%;
}

.info {
  position: absolute;
}

.info.player {
  position: absolute;
  top: 0;
  margin-top: 51%;
  right: 1em;
  text-align: right;
}

@media (max-height: 1077px) {
  .info.player {
    margin-top: 50%;
  }
}

.info.player #status {
  clear: both;
}
.info.player #status ul {
  margin: 10px 0 0 0;
}
.info.player #status ul li {
  float:left;
}

.info.player #status ul li#gas span {
  background: linear-gradient(180deg, #ff8000 0%, #ff8000 100%);
}
.info.player #status ul li#gas.dead {
  animation: trew-pulse 100ms infinite;
}
.info.player #status ul li#gas.dead span {
  height: 0 !important;
}
.info.player #status ul li#gas.dead i.fas:before {
  content: "\f714";
}

.info.player #status ul li#seatbelt span {
  background: rgba(68, 56, 56, 0.35);
}
.info.player #status ul li#lights span {
  background: rgba(68, 56, 56, 0.35);
}
.info.player #status ul li#engine span {
  background: rgba(68, 56, 56, 0.35);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Speedometer</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900&display=swap" id="font" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="global" style="display: block;">
            <div class="app" id="placeholder1">
                <div class="round-progress">
                    <div class="round-overflow">
                        <div class="bar" id="speedBar"></div>
                    </div>

                    <div class="round-info">
                        <br />
                        <a id="kilometers" style="font-size: 15px; font-family: 'Montserrat'; font-weight: 700; text-shadow: 0 0 4px black; color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;">Speed (km/h)</a>
                        <br />
                        <a id="speedText" style="font-size: 50px; font-family: 'Montserrat'; font-weight: 500; text-shadow: 0 0 4px black; color: white; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;">0</a>
                    </div>
                <div class="info player">
                    <div id="status" style="display: inline-block;">
                        <ul>
                            <li class="icon" id="lights">
                                <i><img src="https://i.imgur.com/ry04rTj.png" /></i><span></span>
                            </li>

                            <li class="icon" id="seatbelt">
                                <i><img src="https://i.imgur.com/bTv5mwk.png" /></i><span></span>
                            </li>

                            <li class="icon" id="gas">
                                <i><img src="https://i.imgur.com/0Wrhhis.png" /></i><span></span>
                            </li>

                            <li class="icon" id="engine">
                                <i><img src="https://i.imgur.com/65v3o9w.png" /></i><span></span>
                            </li>

                            <li class="icon" id="lock">
                                <i><img src="https://i.imgur.com/biJ8RJX.png" /></i><span></span>
                            </li>
                        </ul>
                    </div>
                </div>
                </div>

            </div>
        </div>

        <script src="script.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/cferdinandi/saferInnerHTML@1/dist/saferInnerHTML.polyfills.min.js"></script>
    </body>
</html>

Answer 1

round-overflow 设置为 200 像素，所有内容都在其中，因此它们会被该宽度“困住”。如果增加 round-overflow 的宽度，它们将展开成 1 行。当然，这可能会产生新的问题，但这就是问题所在。

可能的/部分修复：

添加宽度：

.info.player {
    width: 100%;
}

更改边距：

.icon {
    margin: 10px 0px 0 1px;
}

发生了一些我没有研究过的不寻常的事情。

为什么这些元素不是内联的？

1 个答案: