右填充问题标题 - 构建响应式设计答案

【问题标题】：Right Padding Issue Header- Building Responsive Design右填充问题标题 - 构建响应式设计
【发布时间】：2022-01-24 03:10:02
【问题描述】：

我正在尝试为桌面、移动设备等构建响应式设计页面。

每个菜单项的标题都应该是右对齐的。我已经给出了零边距，但是当我检查 Chrome 中的输出导致第三个菜单项溢出到下一行时，它仍然出现。我做错了什么？

Chrome Inspect 截图：Chicken headerImage旁边可以观察到填充

代码如下：

/********** Base styles **********/
* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
h1 {
  margin-bottom: 15px;
  text-align: center;
}

p {
  border: 1px solid black;
  background-color: #A52A2A;
  width: 90%;
  height: 150px;
  margin-right: auto;
  margin-left: auto;
  font-family: Helvetica;
  color: white;
}
section{
  position:relative;
  margin:10px;
}
.menuItem{
  margin:0;
  padding: 0;
  position: relative; top:0%;left:80%;
  margin-bottom: 0px;
  margin-right: 0px;
  border: 1px solid black;
  background-color: #A52A2A;
  width: 20%;
  height: 10%;
  font-family: Helvetica;
  color: grey;
  overflow-wrap:break-word;
  /*position: relative; top:1; right:1;*/
}
/* Simple Responsive Framework. */
.row {
  /*width: 50%;*/
}

/********** Desktop only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    border: 1px solid green;
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/********** Tablets only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    border: 1px solid green;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
}

/********** Phones only **********/
@media (max-width: 767px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
    border: 1px solid green;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 74.99%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

  <!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="CSS/module2-style.css"/>
      <title>Assignment Solution for Module 2</title>
    </head>
    <body>
      <h1>Our Menu</h1>
      <section class="row col-lg-4 col-md-6 col-sm-12">
          <div class="menuItem">Chicken</div>
          <div>
            lorem ipsum dolor sit amet, consectetur
            adipisicing elit, sed do eiusmod tempor incididunt
            ut labore et dolore magna aliqua. Ut enim ad
            minim veniam, quis nostrud exercitation ullamco
            laboris nisi ut aliquip ex ea commodo consequat
          </div>
      </section>
      <section class="row col-lg-4 col-md-6 col-sm-12">
        <div class="menuItem">Beef</div>
        <div>
        lorem ipsum dolor sit amet, consectetur
        adipisicing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat
      </div>
    </section>
    <section class="row col-lg-4 col-md-12 col-sm-12">
      <div class="menuItem">Sushi</div>
      <div>
      lorem ipsum dolor sit amet, consectetur
      adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat
    </div>
  </section>
    </body>
  </html>

https://jsfiddle.net/t1ad2ofu/

【问题讨论】：

我在 Firefox（全尺寸桌面）中没有遇到同样的问题，除非我禁用你的 width: 20%;但是我必须说你的标记对于目前看起来非常简单的布局来说有点奇怪。是不是应该像现在这样（2 列菜单项，除了 3 个以上的菜单项）？我假设通过响应您希望 2 列在平板电脑和手机等较小的屏幕上折叠成 1 列？
谢谢。我认为我正在以复杂的方式进行操作。
:) 如果您仍然卡在同一点上，并且如果我上面的描述是正确的，我可以向您展示一种使用 flex 功能快速获得相同布局的方法。

标签： html css

【解决方案1】：

它不是“溢出”或与边距有关，只是检查器强调它是一个块元素，应该是其父级宽度的 100% 以占据空间。

在.menuItem 上使用display: inline-block。

.menuItem{
  margin:0;
  padding: 0;
  position: relative; 
  top:0%; left:80%;
  margin-bottom: 0px;
  margin-right: 0px;
  border: 1px solid black;
  background-color: #A52A2A;
  width: 20%;
  height: 10%;
  font-family: Helvetica;
  color: grey;
  overflow-wrap:break-word;

  display: inline-block;
}

【讨论】：