当屏幕尺寸变小时，按钮会超出其 div

Question

我正在尝试构建一个待办事项列表，有一个编辑按钮，其大小等于普通或更大屏幕上的 div 高度，但是当屏幕变得小于 500px 时，按钮折叠并超出其 div，这是我的列表在中大屏幕上看起来

但是当我将 window 调整为小于 400 或 500 像素时，它看起来像

这是我的反应 JSX 代码

export default function TodoList(props) {
     const list = props.todos.map(todo =>
          <div className="TodoList">
               <h3 >{todo.todo}</h3>
               <div className="btn">
               <button>edit</button>
               </div>
               
          </div>
          
     )
     return (
          <div>
               {list}
          </div>
     )
}

我的 css 看起来像

.TodoList{
     background: #283048;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     padding: 2px;
     margin: 10px;     
     display: block;
     width: 50%;
     margin-left: auto;
     margin-right: auto;
     color: snow;
     transform: skew(20deg);
     height: 3rem;
     
}

.TodoList h3{
     transform: skew(-20deg);
     letter-spacing: 2px;
     display: inline-block;
}

.btn{
     float: right;
     height: 100%;
}

.btn button{
     height: 100%
}

Answer 1

问题实际上出在您的 CSS 中。 当屏幕变小时，倾斜 20 度的 todolist 和按钮就没有空间了。 如果去掉width: 50%; 规则并使用text-align: center; 你会得到一个完美的结果。

 .TodoList{ background: #283048; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #859398, #283048); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ padding: 2px; margin: 10px; display: block; margin-left: auto; margin-right: auto; color: snow; transform: skew(20deg); height: 3rem; text-align: center; }.TodoList h3{ transform: skew(-20deg); letter-spacing: 2px; display: inline-block; }.btn{ float: right; height: 100%; }.btn button{ height: 100% } @media only screen and (min-width: 600px) {.TodoList { width: 50%; } }

 <div class="TodoList"> <h3 >Make Coffee</h3> <div class="btn"> <button>edit</button> </div> </div> <div class="TodoList"> <h3 >Make Tea</h3> <div class="btn"> <button>edit</button> </div> </div> <div class="TodoList"> <h3 >Make Orange Juice</h3> <div class="btn"> <button>edit</button> </div> </div>

Answer 2

不幸的是，在发表评论时是在移动设备上，所以制作一个片段会很尴尬。

所以这里是一个使用 FlexBox 的例子，如果你看的话，它也会使标记更简单。 flexbox 对这种布局非常有用。 不需要高度 100% 等，或包装 div。

 .TodoList{ background: #283048; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #859398, #283048); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ padding: 2px; margin: 10px; display: flex; margin-left: auto; margin-right: auto; color: snow; transform: skew(20deg); text-align: center; }.TodoList h3{ flex: 1; transform: skew(-20deg); letter-spacing: 2px; display: inline-block; }.TodoList { width: 50%; }

 <div class="TodoList"> <h3 >Make Coffee</h3> <button>edit</button> </div> <div class="TodoList"> <h3 >Make Tea</h3> <button>edit</button> </div> <div class="TodoList"> <h3 >Make Orange Juice</h3> <button>edit</button> </div>

Answer 3

所以，我找到了更好的解决方案。 现在，我的按钮在每个屏幕尺寸下都具有与其 div 相同的高度，并且我的 div 高度根据其内容而增加。 我已经使用 position 属性更新了 .btn class ，该属性将我的按钮高度与 div 的高度同步。

.btn{
     float: right;
     position:absolute;
     top: 0;
     bottom: 0;
     right: 0;
}

并为不隐藏按钮下方的文本添加了边距

.TodoList h3{
     transform: skew(-20deg);
     letter-spacing: 2px;
     display: inline-block;
     /* margin is added to shift text onto new line instead of hiding it beneath the edit button */
     margin: 5px 25px;
}

并添加了媒体查询

@media only screen and (min-width: 500px) {
     .TodoList {
       width: 50%;
     }
}

这是现在的样子