gpt4 book ai didi

html - 如何防止 li 文本进入按钮下方

转载 作者:行者123 更新时间:2023-12-01 23:22:33 25 4
gpt4 key购买 nike

当按钮太大时,如何防止文本位于按钮下方?

HTML

<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;900&display=swap"
rel="stylesheet">
</head>
<html>
<body>
<div class="app">
<div class="container">
<h1>Shopping List</h1>
<input type="text" placeholder="Add an item" id="item-input"/>

<button id="item-button">Add</button>
<ul id="items">
<li><button class="remove">X</button>Hamburger</li>
<li><button class="remove">X</button>Milk</li>
</ul>
</div>
</div>
</body>
</html>

这就是正在发生的事情

Text going under the button

这是 CodePen

https://codepen.io/ReaperClown/pen/oNZprmY

最佳答案

break-word改为break-all:

li {
margin: 0.5em 0;
word-break: break-all;
}

关于html - 如何防止 li 文本进入按钮下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67795952/

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