css 在我的移动的友好的网站功能的问题

lmvvr0a8 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(69)

我为一个朋友编码这个网站，她希望文本框的背景颜色一直到边缘，而实际的文本稍微远离左边缘。我已经编码了，它看起来像这样：the website as it is now
但我希望这个网站也适用于移动的屏幕，我编码的方式，文本被切断，如下图所示：the website in a smaller screen size如何修复此问题？我想让文本远离边缘，而不是居中，但它也适用于移动的屏幕。下面是我的代码：

.main {
  text-align: center;
}

#about-me {
  text-align: left;
  background-color: #FF8242;
  font-size: 25px;
  padding: 15px;
  margin: -8px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #5c362c;
}

#about-me p {
  margin-left: 300px;
  width: 900px;
}

#about-me h2 {
  margin-left: 300px;
}

<div id="about-me">
    <h2>
        About me
    </h2>
    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum ea culpa voluptas eius inventore
        possimus ipsum, officia soluta earum magni corrupti perferendis voluptatem eaque laudantium, numquam
        officiis, harum quae libero? Dolorem, doloribus tempora nihil reprehenderit placeat obcaecati qui
        natus. Saepe!
    </p>
</div>

正如你所看到的，我只是简单地使用了保证金，老实说，我不知道还能做些什么来让它工作，我是一个初学者编码器，只学过HTML编码和CSS。我以前用过Java脚本，但我从来没有学过，所以我不太懂。

css

来源：https://stackoverflow.com/questions/77332338/issue-with-a-function-in-my-mobile-friendly-website

2条答案

按热度按时间

jk9hmnmh1#

永远不要对这样的内容元素使用固定宽度。您可以使用max-width: 900px;而不是width: 900px;，这将防止文本超出窗口。
您可以使用百分比值作为左边距，而不是固定的像素值。或者你使用一个媒体查询（参见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries），不同的屏幕宽度有不同的设置。

.main {
  text-align: center;
}

#about-me {
  text-align: left;
  background-color: #FF8242;
  font-size: 25px;
  padding: 15px;
  margin: -8px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #5c362c;
}

#about-me p {
  margin-left: 15%;
  max-width: 900px;
}

#about-me h2 {
  margin-left: 15%;
}

<div id="about-me">
    <h2>
        About me
    </h2>
    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum ea culpa voluptas eius inventore
        possimus ipsum, officia soluta earum magni corrupti perferendis voluptatem eaque laudantium, numquam
        officiis, harum quae libero? Dolorem, doloribus tempora nihil reprehenderit placeat obcaecati qui
        natus. Saepe!
    </p>
</div>

赞(0）回复(0）举报 2023-10-21

34gzjxbg2#

代码显式设置宽度：

width: 900px;

如果屏幕窄于900像素，则此宽度将比屏幕宽。（好吧，技术上是1200像素，因为还有margin-left: 300px;。
您可以将其更改为max-width。此外，我还建议在屏幕较窄时删除margin。大概是这样的：

.main {
  text-align: center;
}

#about-me {
  text-align: left;
  background-color: #FF8242;
  font-size: 25px;
  padding: 15px;
  margin: -8px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #5c362c;
}

#about-me p {
  margin-left: 300px;
  max-width: 900px;
}

#about-me h2 {
  margin-left: 300px;
}

@media (max-width: 1200px) {
  #about-me p {
    margin-left: unset;
  }

  #about-me h2 {
    margin-left: unset;
  }
}

<div id="about-me">
    <h2>
        About me
    </h2>
    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum ea culpa voluptas eius inventore
        possimus ipsum, officia soluta earum magni corrupti perferendis voluptatem eaque laudantium, numquam
        officiis, harum quae libero? Dolorem, doloribus tempora nihil reprehenderit placeat obcaecati qui
        natus. Saepe!
    </p>
</div>

赞(0）回复(0）举报 2023-10-21

我来回答

css 在我的移动的友好的网站功能的问题

2条答案

相关问题

热门标签

最新问答