문제
두 개가 포함된 목록이 있습니다. <div>
모든 것 <li>
그리고 나는 그것들을 서로 옆에 띄우고 싶습니다. <li>
전체 사용 가능한 공간을 차지합니다.어떻게 해야 하나요?
<html>
<head>
<title></title>
<style type="text/css">
body {
}
ul {
}
li {
}
.a {
}
.b {
}
</style>
</head>
<body>
<ul>
<li>
<div class="a">
content
</div>
<div class="b">
content
</div>
</li>
</ul>
</body>
</html>
해결책
*{ margin: 0; padding: 0;}
li{ width: 100%: display: block; }
li:after{ clear: both; }
div.a{ width: 49%; float: left; }
div.b{ width: 49%; float: left; }
트릭을 수행해야합니다.
다른 팁
div의 경우 왼쪽으로 플로팅하면 되고 li은 클리어를 원합니다.그래서:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
이 게시물은 오래된 게시물이지만 누군가 동일한 문제에 직면하면 다음 사항에 대해 생각해 보십시오.
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
당신이 사용할 수있는 기간 대신에 div
얻으려면 div 다른 것 외에 또는 수평으로 .CSS 하지만 당신이 사용한다면 기간 자연스럽게 그럴 거예요.다음 코드를 복사하여 붙여넣으세요. HTML 내가 말하는 내용을 확인하세요.
<ul>
<li>
<div style="background-color:red">red</div>
<div style="background-color:blue">blue</div>
</li>
<li>
<span style="background-color:red">red</span>
<span style="background-color:blue">blue</span>
</li>
</ul>
또한 적어도 Microsoft의 경우 <li><div></div></li>
검증하지 않습니다.
확인하지 않고도 작동합니다.
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
나는 전체 공간을 취한다는 것은 너비가 100%임을 의미한다고 가정합니다.또한 목록에 스타일을 적용하는 것을 원하지 않는다고 가정하므로 이 예에서는 목록을 제거했습니다.이것은 또한 해킹이 없습니다.목록 항목에 너비와 오버플로가 있는 한 아무것도 지울 필요가 없습니다.숨겨진 속성/값 쌍.
ul,
li {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
overflow: hidden;
}
li div.a,
li div.b {
float: left;
}
li { width: 100%;}
.a { float: left;}
.b { float: left;}
li{width:100%;}
.a{}
.b{float: left;}
CSS에 대한 내 지식에 따라 필요에 따라 수행되어야 합니다.
제휴하지 않습니다 StackOverflow