juzi_go 2021-12-26 18:14 采纳率: 80%
浏览 52

html css容器没法左对齐 如何强制左对齐?

问题遇到的现象和发生背景

html css容器没法左对齐 如何强制左对齐,该模块的总体宽度为580px。实现如图效果。

img

问题相关代码,请勿粘贴截图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作题2</title>
<meta name="keywords" content="叮当网,图书,电子商务" />
<link rel="stylesheet" type="text/css" href="css/test2.css" />
</head>

<body>
<div class="center_top">
    <div class="centertopclass">
        <ul>
            <li class="centertopullione">主编推荐&nbsp;最全的图书、最低的价格尽在叮当网</li>
            <li class="centertopullitwo"><a href="#">详情&gt;&gt;</a></li>
        </ul>
        <div class="clear"></div>
        </div>
        <div class="centerimg">
            <a href="#"><img src="images/vc.jpg" height="180" width="132" alt="" class="centerbookimg" /></a>
            <a href="#" class="booktitle"><h5>Visual C++编程实例精粹</h5></a>
            <p class="bookcontents">本书围绕一些关于C#和.NET的重要主题,包括C#语言元素,.NET资源管理、使用C#表达设计、创建二进制组件和使用框架等,讲述了最常见的50个问题的解决方案,为程序员提供了改善C#和.NET程序的方法。本书通过将每个条款构建在之前条款之上,并合理地利用之前的条款,来让读者最大限度地学习书中的内容,为其在不同情况下使用最佳构造提供指导。本书适合各层次的C#程序员阅读,同时可以推荐给高校教师(尤其是软件学院教授C#/.NET课程的老师),作为C#双语教学的参考书...</p>      
            <p><span class="spanone">定价:¥49元</span>
               <span class="spantwo">折扣价:¥38元</span>
               <span class="spanthree">折扣:75折</span>
            </p>
        </div>
</div>

</body>
</html>

.centertop{
    margin: 0;
    padding: 0;
    width: 580px;
}
.centertopclass{
    margin: 0;
    padding:0;
}
.centertopclass ul{
    margin: 0;
    padding:0;
    list-style-type: none;
    font-size: 12px;
}
.centertopclass ul li{
    float: left;
    font-size: 12px;
}
.centertopullione{
    width: 480px;
    height: 30px;
    background: #fff url(../images/index_arrow.gif) no-repeat left top;
    padding: 0 0 0 20px;
    color: #c49238;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.centertopullitwo{
    width: 122px;
    text-align: right;
}
.centertopullitwo a{
    color: #000;
    text-decoration: none;
}

.centerbookimg{
    float: left;
    margin: 10px 10px 10px 0;
    border: none;
}
.booktitle{
    font-size: 14px;
    font-weight: normal;
    color: #06329b;
}
.bookcontents{
    text-indent: 20px;
    line-height: 24px;
    font-size: 12px;
}
.spanone,.spantwo,.spanthree{
    margin-left: 20px;
    font-size: 12px;
}
.spanone{
    text-decoration: line-through;
}
.centerimg{
    float: left;
    width: 580px;
}
我想要达到的结果

img

  • 写回答

2条回答 默认 最新

  • 本堃不方 2021-12-26 18:23
    关注

    是因为centerimg设置了浮动,你删除掉浮动看看

    评论

报告相同问题?

问题事件

  • 创建了问题 12月26日

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能!!有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条