목록 항목의 부동 div

StackOverflow https://stackoverflow.com/questions/93625

  •  01-07-2019
  •  | 
  •  

문제

두 개가 포함된 목록이 있습니다. <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에 대한 내 지식에 따라 필요에 따라 수행되어야 합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top