问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css样式问题，初步判断有可能是min-width和width同时出现问题，寻求大神帮助!

头像
时间小鱼
    127615
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .role-indicators{
        font-size: 0;
    }
    .role-indicators .role-indicator{
      font-size: 0;
      vertical-align: top;
      display: inline-block;
    }

    .role-indicators .role-indicator .indicator-item{
      width: calc((100% - 60px) / 4);
      min-width: 288px;
      margin: 0 0 12px 12px;
      background: #FAFAFA;
      box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
      display: inline-block;
      vertical-align: top;
    }

    .role-indicators .role-indicator .indicator-item .item-head{
      height: 74px;
      font-size: 14px;
      border-bottom: 1px solid #E1E5E6;
      background: #EEE;
    }

    .role-indicators .role-indicator .indicator-item .item-head .person-photo{
      margin: 12px;
      width: 50px;
      height: 50px;
      border: 4px solid #E1E5E6;
      border-radius: 50%;
      background-color: #FFFFFF;
      background-size: cover;
      background-position: center;
      display: inline-block;
      vertical-align: middle;
    }

    .role-indicators .role-indicator .indicator-item .item-head .role-name{
      width: calc(100% - 86px);
      vertical-align: middle;
      display: inline-block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list{
      position: relative;
      height: 56px;
      cursor: pointer;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list:nth-of-type(even){
      background: #F8F8F8;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list:nth-of-type(odd){
      background: #FFF;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-view{
      display: block;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit{
      display: none;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit .hr1-form-input{
      margin-top: 12px;
      vertical-align: middle;
      width: 72px;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit .hr1-form-input input[type=text]{
      text-align: right;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit .hr1-form-select{
      vertical-align: middle;
      margin: 0 12px;
      width: 126px;
      font-size: 12px;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit .hr1-form-select .hr1-form-input{
      width: inherit;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit .hr1-form-select .hr1-form-input input[type=text]{
      text-align: left;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit .hr1-form-number {
      width: auto;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .list-edit .hr1-form-number div:last-child button[type=button] {
      display: none;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list:hover .indicator-name{
      width: calc(100% - 136px);
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list:hover .icon-edit-circle, .role-indicators .role-indicator .indicator-item .item-body .item-list:hover .icon-delete{
      display: inline-block;
      vertical-align: middle;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list:hover .weight{
      margin-bottom: 4px;
      display: inline-block;
      font-size: 16px;
      vertical-align: middle;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list.edit{
      box-shadow: 0 0 10px 0 rgba(0,0,0,0.30);
      z-index: 1;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list.edit .list-view{
      display: none;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list.edit .list-edit{
      display: block;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list.edit .icon-edit-circle, .role-indicators .role-indicator .indicator-item .item-body .item-list.edit .icon-delete{
      display: inline-block;
      vertical-align: top;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list.edit .weight{
      margin: 12px 0 0 4px;
      display: inline-block;
      font-size: 16px;
      vertical-align: middle;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .icon-edit-circle, .role-indicators .role-indicator .indicator-item .item-body .item-list .icon-delete{
      display: none;
      font-size: 14px;
      color: #1799C7;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .function-right{
      float: right;
      padding-top: 20px;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .icon-edit-circle, .role-indicators .role-indicator .indicator-item .item-body .item-list .icon-delete{
      margin-right: 12px;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .indicator-name{
      margin-left: 12px;
      width: calc(100% - 82px);
      line-height: 56px;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .hr1-circle{
      margin-right: 12px;
      font-size: 12px;
      vertical-align: middle;
      display: inline-block;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-list .icon-tick{
      margin: 12px 12px 0 18px;
      font-size: 16px;
      display: inline-block;
      vertical-align: middle;
      color: #1799C7;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit{
      height: 56px;
      font-size: 0;
      border-top: 1px solid #E1E5E6;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .hr1-form-input{
      margin-top: 12px;
      vertical-align: middle;
      width: 72px;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .hr1-form-input input[type=text]{
      text-align: right;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .hr1-form-select{
      vertical-align: middle;
      margin: 0 12px;
      width: 126px;
      font-size: 12px;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .hr1-form-select .hr1-form-input{
      width: inherit;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .hr1-form-select .hr1-form-input input[type=text]{
      text-align: left;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .hr1-form-number {
      width: auto;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .hr1-form-number div:last-child button[type=button] {
      display: none;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .weight{
      margin: 12px 0 0 4px;
      display: inline-block;
      font-size: 16px;
      vertical-align: middle;
    }

    .role-indicators .role-indicator .indicator-item .item-body .item-edit .icon-plus{
      margin: 12px 12px 0 18px;
      font-size: 16px;
      display: inline-block;
      vertical-align: middle;
      color: #1799C7;
      cursor: pointer;
    }
    .hr1-circle {
        display: inline-block;
        text-align: center;
    }

    .hr1-circle .circle-progress{
      width: 20px;
      height: 20px;
      stroke-dasharray: 255%;
      stroke-dashoffset: 255%;
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg);
      fill: none;
      vertical-align: middle;
    }

    .hr1-circle .percent{
      margin-left: 6px;
      line-height: 20px;
      color: #FF8C3F;
      vertical-align: middle;
    }
    </style>
</head>
<body>
    <div class="role-indicators">
        <div class="role-indicator">
            <div class="indicator-item">

                <div class="item-body">
                    <div class="item-list">
                        <div class="list-view">
                            <span class="indicator-name">个人指标4</span><span class="function-right">
                            <div class="hr1-circle">
                                <svg class="circle-progress" xmlns="http://www.w3.org/2000/svg"><circle stroke="#E1E5E6" stroke-dashoffset="0%" cx="50%" cy="50%" r="40%" stroke-width="2"></circle><circle stroke="#1799C7" stroke-dashoffset="232.05%" cx="50%" cy="50%" r="40%" stroke-width="4"></circle></svg><span class="percent"><!-- react-text: 894 -->9<!-- /react-text --><!-- react-text: 895 -->%<!-- /react-text --></span>
                            </div>
                            <span class="icon-edit-circle"></span><span class="icon-delete"></span></span>
                        </div>
                    </div>
                    <div class="item-list">
                        <div class="list-view">
                            <span class="indicator-name">个人指标5</span><span class="function-right">
                            <div class="hr1-circle">
                                <svg class="circle-progress" xmlns="http://www.w3.org/2000/svg"><circle stroke="#E1E5E6" stroke-dashoffset="0%" cx="50%" cy="50%" r="40%" stroke-width="2"></circle><circle stroke="#1799C7" stroke-dashoffset="196.35%" cx="50%" cy="50%" r="40%" stroke-width="4"></circle></svg><span class="percent"><!-- react-text: 907 -->23<!-- /react-text --><!-- react-text: 908 -->%<!-- /react-text --></span>
                            </div>
                            <span class="icon-edit-circle"></span><span class="icon-delete"></span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="role-indicator">
            <div class="indicator-item">

                <div class="item-body">
                    <div class="item-list">
                        <div class="list-view">
                            <span class="indicator-name">组织指标1</span><span class="function-right">
                            <div class="hr1-circle">
                                <svg class="circle-progress" xmlns="http://www.w3.org/2000/svg"><circle stroke="#E1E5E6" stroke-dashoffset="0%" cx="50%" cy="50%" r="40%" stroke-width="2"></circle><circle stroke="#1799C7" stroke-dashoffset="127.5%" cx="50%" cy="50%" r="40%" stroke-width="4"></circle></svg><span class="percent"><!-- react-text: 942 -->50<!-- /react-text --><!-- react-text: 943 -->%<!-- /react-text --></span>
                            </div>
                            <span class="icon-edit-circle"></span><span class="icon-delete"></span></span>
                        </div>
                    </div>
                    <div class="item-list">
                        <div class="list-view">
                            <span class="indicator-name">个人指标1 individua lindex three recent goals</span><span class="function-right">
                            <div class="hr1-circle">
                                <svg class="circle-progress" xmlns="http://www.w3.org/2000/svg"><circle stroke="#E1E5E6" stroke-dashoffset="0%" cx="50%" cy="50%" r="40%" stroke-width="2"></circle><circle stroke="#1799C7" stroke-dashoffset="204%" cx="50%" cy="50%" r="40%" stroke-width="4"></circle></svg><span class="percent"><!-- react-text: 955 -->20<!-- /react-text --><!-- react-text: 956 -->%<!-- /react-text --></span>
                            </div>
                            <span class="icon-edit-circle"></span><span class="icon-delete"></span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="role-indicator">
            <div class="indicator-item">

                <div class="item-body">
                    <div class="item-list">
                        <div class="list-view">
                            <span class="indicator-name">个人指标2</span><span class="function-right">
                            <div class="hr1-circle">
                                <svg class="circle-progress" xmlns="http://www.w3.org/2000/svg"><circle stroke="#E1E5E6" stroke-dashoffset="0%" cx="50%" cy="50%" r="40%" stroke-width="2"></circle><circle stroke="#1799C7" stroke-dashoffset="153%" cx="50%" cy="50%" r="40%" stroke-width="4"></circle></svg><span class="percent"><!-- react-text: 990 -->40<!-- /react-text --><!-- react-text: 991 -->%<!-- /react-text --></span>
                            </div>
                            <span class="icon-edit-circle"></span><span class="icon-delete"></span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="role-indicator">
            <div class="indicator-item">

                <div class="item-body">
                    <div class="item-list">
                        <div class="list-view">
                            <span class="indicator-name">组织指标2</span><span class="function-right">
                            <div class="hr1-circle">
                                <svg class="circle-progress" xmlns="http://www.w3.org/2000/svg">
                                    <circle stroke="#E1E5E6" stroke-dashoffset="0%" cx="50%" cy="50%" r="40%" stroke-width="2"></circle>
                                    <circle stroke="#1799C7" stroke-dashoffset="127.5%" cx="50%" cy="50%" r="40%" stroke-width="4"></circle>
                                </svg>
                                <span class="percent"><!-- react-text: 1025 -->50<!-- /react-text --><!-- react-text: 1026 -->%<!-- /react-text --></span>
                            </div>
                            <span class="icon-edit-circle"></span><span class="icon-delete"></span></span>
                        </div>
                    </div>
                    <div class="item-list">
                        <div class="list-view">
                            <span class="indicator-name">个人指标2</span><span class="function-right">
                            <div class="hr1-circle">
                                <svg class="circle-progress" xmlns="http://www.w3.org/2000/svg"><circle stroke="#E1E5E6" stroke-dashoffset="0%" cx="50%" cy="50%" r="40%" stroke-width="2"></circle><circle stroke="#1799C7" stroke-dashoffset="224.4%" cx="50%" cy="50%" r="40%" stroke-width="4"></circle></svg><span class="percent"><!-- react-text: 1038 -->12<!-- /react-text --><!-- react-text: 1039 -->%<!-- /react-text --></span>
                            </div>
                            <span class="icon-edit-circle"></span><span class="icon-delete"></span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

    问题：左右间距不是预期结果，解决问题方法做如下修改，为什么这么做可以？

    .role-indicators .role-indicator{
  font-size: 0;
  vertical-align: top;
  display: inline-block;
  width: calc((100% - 60px) / 4);
  min-width: 288px;
  margin: 0 0 12px 12px;
}

.role-indicators .role-indicator .indicator-item{
  width: 100%;
  background: #FAFAFA;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
  display: inline-block;
  vertical-align: top;
}
    htmlcss
    阅读 4k
    2 个回答
    得票最新
    头像
    toBeTheLight
      16.6k41634

      写一个猜测吧。
      .indicator-name或者indicator-item的calc(100% - ***)引起的；
      inline-block的宽度由内容撑开，但是子元素的宽度又calc(100% - ***)依赖父元素的宽度。

      头像
      Gittig
        1717

        分析：
        查看代码，可以发现第二个盒子的宽度其实是350px，而其他的盒子只有300px，因此导致四个盒子之间的间距不等。
        图片描述

        原因：
        你没有给role-indicator盒子设置宽度，那么盒子的宽度就会根据内容进行撑开。

        <span class="indicator-name">个人指标1 individua lindex three recent goals</span>

        这里的长度明显过长了，就把role-indicator大盒子撑开了……

        解决：
        1、可以把文字长度设置长度一致，这个方法最简单。
        2、给每个role-indicator盒子设置宽度300px就可以解决问题了。

        如果解决了问题，采纳答案吧。。。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题