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

标签 html css

你好,

在我为智能手机设计的网页中,我添加了一个页脚,如屏幕截图和下面提取的 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/

相关文章:

javascript - 组合来自不同变量的数组以随机填充 javascript

javascript - ng-show if json 返回 [false] with angularjs

javascript - 单击放大 SVG 组,然后最小化

jquery - 将光标悬停在 slider 的左侧或右侧时,如何将光标转到左侧或右侧图标?

Javascript 使用选项将单列 html 更改为多列

css - 如何水平居中表情符号?

css - 当 css position sticky 停止粘附时

css - 如果目录不在 ScrollView 中则显示 Div

javascript - 无论窗口大小如何,都保持 div 覆盖相对于背景图像

php - 我的php网站的Metro风格动态磁贴