具有相同宽度和边距的Flex

Question

我试图让每个ul li宽度等于上面的元素input但是li有margin而且它不能相等，我想要的是宽度等于边距。 但左右不相等。

 #inline { display: flex; } .group input, .group { width: 100%; } div#box { padding: 40px; } .group:first-child { margin-right: 50px; } .group ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; position: relative; } .group ul li { width: calc(50% - 20px); background: gray; list-style: none; margin: 5px; padding: 5px; } /* guide */ .group ul::after { content: ""; display: block; width: 1px; height: 173px; background: red; position: absolute; right: 4px; top: -36px; } .group ul::before { content: ""; display: block; width: 1px; height: 173px; background: green; position: absolute; right: -4px; top: -36px; } 

 <div id="box"> <div id="inline"> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> </div> 

我做了一个更好理解的指导方针，我希望li等于绿线而不是红线。 （也来自左）

Answer 1

1. 在您的输入box-sizing: border-box添加box-sizing: border-box ，因此它不会超过100％。
2. 从你的li删除左右边距
3. 将justify-content: space-between设置justify-content: space-between .group ul - 这将设置项目之间的边距。

 #inline { display: flex; } .group input, .group { width: 100%; box-sizing: border-box; } div#box { padding: 40px; } .group:first-child { margin-right: 50px; } .group ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; position: relative; justify-content: space-between; } .group ul li { width: calc(50% - 20px); background: gray; list-style: none; margin-top: 5px; margin-bottom: 5px; padding: 5px; } 

 <div id="box"> <div id="inline"> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> </div> 

Answer 2

您可以调整以下边距：

 #inline { display: flex; } .group input, .group { width: 100%; } div#box { padding: 40px; } .group:first-child { margin-right: 50px; } .group ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; position: relative; } .group ul li { width: calc(50% - 13px); background: gray; list-style: none; margin: 5px; padding: 5px; } .group ul li:nth-child(2n) { margin-right:-8px; } .group ul li:nth-child(2n+1) { margin-left:0; } /* guide */ .group ul::after { content: ""; display: block; width: 1px; height: 173px; background: red; position: absolute; right: 4px; top: -36px; } .group ul::before { content: ""; display: block; width: 1px; height: 173px; background: green; position: absolute; right: -4px; top: -36px; } 

 <div id="box"> <div id="inline"> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> </div> 

Answer 3

设定width: calc(100% + 18px); 到ul并从odd li中删除margin/padding-left

 #inline { display: flex; } .group input, .group { width: 100%; } div#box { padding: 40px; } .group:first-child { margin-right: 50px; } .group ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; position: relative; width: calc(100% + 18px); } .group ul li { width: calc(50% - 20px); background: gray; list-style: none; margin: 5px; padding: 5px; } .group ul li:nth-child(odd) { padding-left: 0px; margin-left: 0px; } /* guide */ .group ul::after { content: ""; display: block; width: 1px; height: 173px; background: red; position: absolute; right: 4px; top: -36px; } .group ul::before { content: ""; display: block; width: 1px; height: 173px; background: green; position: absolute; right: -4px; top: -36px; } 

 <div id="box"> <div id="inline"> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <div class="group"><input type="text" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> </div>