float: left;でli要素の文字をdiv要素の周りで回り込ませたい

実現したいこと

float: left;でdiv要素の周りに回り込ませるようにさせたいのです。

発生している問題・分からないこと

float: left;で横並びになるように指定してありますが、現状きっちり二つに分かれて並んでいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<meta name="discription" content="">
7		<meta name="viewport" content="width=device-width,initial-scale=1">
8		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"/>
9		<link rel="stylesheet" href="style.css">
10	</head>
11	<body>
12		<header></header>
13		<main>
14			<div class="box">
15				<ul>
16					<li>テキストテキストテキストテキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
17					<li>テキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
18					<li>テキストテキストテキキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
19				</ul>
20				<div class="box-item">
21				</div>
22			</div>
23		</main>
24	</body>
25</html>

CSS
1@charset "UTF-8";
2
3/* =====================
4
5共通部分
6
7=========================*/
8
9html {
10	font-size: 100%;
11}
12
13a {
14	text-decoration: none;
15}
16
17a:visited {
18	color: black;
19}
20
21img {
22	max-width: 100%;
23}
24
25.box {
26	width: 80%;
27	margin: 0 auto;
28}
29
30li {
31	list-style: inside;
32}
33
34
35.box ul{
36	float: left;
37	width: 40%;
38}
39
40.box-item {
41	float: left;
42	width: 419px;
43	height: 272px;
44	background-color: gray;
45}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

widthが親要素より大きくならないようになど検索してわかりましたが、直してもli要素が回り込んでくれないです

補足

特になし

行動規範の内容に同意します

回答1件

ベストアンサー

こうでしょうか。width: 40%があるので、小さなスクリーンでしか回り込まないと思いますが。

html
1<div class="box-item">
2</div>
3<ul>
4    <li>テキストテキストテキストテキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
5    </li>
6    <li>テキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
7    </li>
8    <li>テキストテキストテキキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストキストテキストテキストテキストテキストテキストストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
9    </li>
10</ul>

css
1.box ul {
2  /* float: left; */
3  width: 40%;
4}
5
6.box-item {
7  /* float: left; */
8  float: right;
9  width: 419px;
10  height: 272px;
11  background-color: gray;
12}