JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<ul>
    <li><span class="title">测试标题：</span><span class="info">文字说明内容</span></li>
    <li><span class="title">测试我这个短的标题：</span><span class="info">我是你的说明，用我来说明问题</span></li>
    <li><span class="title">测试我这个长的标题效果是什么：</span><span class="info">我来测试你吧</span></li>
</ul>

CSS

ul{
  margin:0;
  padding:0;
}

ul li {
  list-style: none outside none;
  margin: 5px 0;
  overflow: auto;
}

.title,
.info {
   display: block;
   float: left;
}
.title {
  margin-right: 10px;
}
.info {
  padding: 2px 0;
  background: orange
}

JavaScript

$(document).ready(function(){
            
            $.fn.autoWidth = function(options) {
                var settings = {
                    limitWidth: false
                }
                
                if(options) {
                    $.extend(settings,options);
                }
                
                var maxWidth = 0;
                this.each(function(){
                    if($(this).width() > maxWidth) {
                        if(settings.limitWidth && maxWidth >= settings.limitWidth){
                            maxWidth = settings.limitWidth;
                        } else {
                            maxWidth = $(this).width();
                        }
                    }
                });
                
                this.width(maxWidth);
            }
            $('.title').autoWidth();
        });