个人中心
gpt4 book ai didi

html - CSS & HTML : my margin is not exactly ending at the left border

转载 作者：行者123 更新时间：2023-11-28 05:17:27 24 4
gpt4 key购买 nike

你好，

在我为智能手机设计的网页中，我添加了一个页脚，如屏幕截图和下面提取的 html 代码所示(我提取了代码的相关部分以避免打扰您)。我正在尝试将蓝色丝带延伸到左侧边距。

知道我在这里缺少什么吗？

非常感谢您的帮助。复活节快乐星期一。

enter image description here

HTML 代码:

<!DOCTYPE html>
<html>
  <head>
...
    <div class="footer" id="footer">Domoosweb mobile version 0.0.1    </div>
  </body>
</html>

CSS 代码:

#tag_domoos_title{
    font-family:Arial;
    font-size: 150%;
    text-align: left;
    position: absolute;
    top: 5px;
    left: 130px;
    color:blue;
    z-index:10;
    font-weight: 900;
}

#tag_update{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 20px;
    left: 90px;
    color:blue;
}

#datetime{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 40px;
    left: 130px;
    color:blue;
}

#tag_sunrise_sunset{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 50px;
    left: 50px;
    color:black;
}

#tag_weather_temperature{
    font-family:Arial;
    font-size: 100%;
    text-align: right;
    position: absolute;
    top: 145px;
    right: 15px;
    color:black;
    font-weight: 900;
}

#current_weather_conditions_title{
    font-family:Arial;
    font-size: 95%;
    text-align: left;
    position: absolute;
    top: 110px;
    left: 10px;
    color:blue;
    font-weight: 900;
}

#current_weather_forecast_title{
    font-family:Arial;
    font-size: 95%;
    text-align: left;
    position: absolute;
    top: 200px;
    left: 10px;
    color:blue;
    font-weight: 900;
}

#tag_weather_condition{
    font-family:Arial;
    font-size: 90%;
    text-align: left;
    position: absolute;
    top: 130px;
    left: 10px;
    color:black;
    font-weight: 600;
}

#tag_additional_weather_information{
    font-family:Arial;
    font-size: 90%;
    text-align: center;
    position: absolute;
    top: 150px;
    left: 10px;
    width: 250px;
    color:black;
}

#meteo_icon {
  position: absolute;
  right: 10px;
  top: 100px;
}

#meteo_forecast{
    font-family:Arial;  
    font-size: 100%;
    float:left;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    height:434px;
    width:870px;
    top:200px;
    position: relative;
}

#meteo_forecast_day1{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 215px;
    left: 10px;
    color:black;
    font-weight: 600;
}

#meteo_forecast_day2{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 285px;
    left: 10px;
    color:black;
    font-weight: 600;
}

#meteo_forecast_day3{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 355px;
    left: 10px;
    color:black;
    font-weight: 600;
}

#meteo_forecast_temperature_day1{
    font-family:Arial;
    font-size: 80%;
    text-align: right;
    position: absolute;
    top: 215px;
    right: 5px;
    color:black;
}

#meteo_forecast_temperature_day2{
    font-family:Arial;
    font-size: 80%;
    text-align: right;
    position: absolute;
    top: 285px;
    right: 5px;
    color:black;
}

#meteo_forecast_temperature_day3{
    font-family:Arial;
    font-size: 80%;
    text-align: right;
    position: absolute;
    top: 355px;
    right: 5px;
    color:black;
}

#meteo_forecast_condition_day1{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 235px;
    left: 10px;
    color:black;
}

#meteo_forecast_condition_day2{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 305px;
    left: 10px;
    color:black;
}

#meteo_forecast_condition_day3{
    font-family:Arial;
    font-size: 80%;
    text-align: left;
    position: absolute;
    top: 375px;
    left: 10px;
    color:black;
}

#domoos_logo {
  position: absolute;
  left: 50px;
  top: 0px;
}

#lorem{
    font-family:Arial;
    font-size: 100%;
    text-align: left;
    position: absolute;
    top: 100px;
    left: 10px;
    height: auto;
}

#footer
{
    font-family:Arial;
    font-size: 40%;
    clear: both;
    border: 1px groove #aaaaaa;
    background: blue;
    color: White;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    line-height: normal;
    margin: 0;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

#hyperlinks_mobile
{
    font-family:Arial;
    font-size: 80%;
    text-align: center;
    position: absolute;
    top: 500px;
    left: 10px;
    color:black;
}

ul {
  background: #bbb;
}
li, [class*="grid"] > * {
  background: #ccc;
}
header, footer {
  background: #ddd;
}
body {
    background-color:#ddd;
}
progress[value] {
  /* Reset the default appearance */
   -moz-appearance: none;
   appearance: none;

   /* leave defaults in for other browsers */
   background-size: 35px 20px, 100% 100%, 100% 100%;
   color:purple; 
}
progress[value]::-webkit-progress-value {
  background-color: purple;
}

最佳答案

将 left:0; 添加到 #footer。请参阅以下(最小化)解决方案:

#footer {
  font-family:Arial;
  font-size: 40%;
  clear: both;
  border: 1px groove #aaaaaa;
  background: blue;
  color: White;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  line-height: normal;
  margin: 0;
  position: fixed;
  bottom: 0px;
  left:0;
  width: 100%;
}
body {
  background-color:#ddd;
}
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="footer" id="footer">Domoosweb mobile version 0.0.1</div>
  </body>
</html>

关于html - CSS & HTML : my margin is not exactly ending at the left border，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43449054/

24 4 0
文章推荐： javascript - 如何使用 PHP 中动态创建的按钮更改数据库值
文章推荐： c++ - 如何以编程方式将控制台字体设置为 Lucida？
文章推荐： css - 一些图片没有显示在 live wordpress 网站上
文章推荐： jquery - 前三个菜单工作正常，其他菜单无法使用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com