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

Question

我正在尝试建立一个待办事项列表，在正常或更大的屏幕上有一个大小等于 div 高度的编辑按钮，但是当屏幕变得小于 500 像素时，按钮会折叠并熄灭它的div，这是我的列表在大中型屏幕上的样子

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

这是我的 React 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 度就没有空间了。如果您删除 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

所以，我找到了更好的解决方案。现在我的按钮在每个屏幕尺寸下都采用与其 div 相同的高度，并且我的 div 高度根据其内容增加。我已经将 .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%;
     }
}

这是现在的样子

Answer 3

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

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

.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>

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

Button goes out of its div when screen size becomes smaller

html

javascript

css

responsive-design

reactjs