与Flexbox相同的宽度

时间：2018-04-18 06:29:03

标签： html5 css3 flexbox

我有以下部分。我已经尝试过这样做，但到目前为止还没有成功。 

.container {
    width: 600px;
}

.row {
    margin-bottom: 10px;
}

.item {
    width: 100%;
    border: 1px solid silver;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    flex: 1 1 0;
}

.item > .selector {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.item > .label-text {
    background-color: silver;
    color: white;
    padding: 0 10px;
    display: flex;
    align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>

可悲的是我无法修改结构。使用该结构的JS太多了。但我可以编辑CSS。我绝对没有使用柔性盒的经验。

span.label-text元素中的文本可以是任意长度，但不能超过其父宽度的一半。

它是一个插件，它用于很多部分。我不能只定义固定宽度。

是否可以使所有span.label-text元素与具有最长文本的元素一样宽，而无需修改html或使用JS？

3 个答案:

答案 0 :(得分：4)

以下是jQuery示例，在所有项目中检查 label-text 最大宽度，并将宽度应用于所有标签文字。

＆＃13;
＆＃13; 
var width =0
		jQuery('.item').each(function() {
			
			if(width <= jQuery(this).children(".label-text").outerWidth())
			{
				width = jQuery(this).children(".label-text").outerWidth();
			}
		});
		jQuery(".label-text").css('width',Math.ceil(width));
＆＃13; 
body { margin:0; padding:0;}
		
		.container {
			width: 600px;
		}
		
		.row {
			margin-bottom: 10px;
		}
		
		.item {
			width: 100%;
			border: 1px solid silver;
			margin-bottom: 0;
			display: flex;
			justify-content: space-between;
			min-height: 60px;
			flex: 1 1 0;
		}
		
		.item > .selector {
			display: flex;
			align-items: center;
			padding-left: 20px;
		}
		
		.item > .label-text {
			background-color: silver;
			color: white;
			padding: 0 10px;
			display: flex;
			align-items: center;
		}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

由于您使用的是 Flexbox ，因此您可以使用 flex-items 的flex 值 .item元素，例如：

.container {
    width: 600px;
}

.row {
    margin-bottom: 10px;
}

.item {
    width: 100%;
    border: 1px solid silver;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    flex: 1 1 0;
}

.item > .selector {
    display: flex;
    flex: 2; /* added; makes it twice as wide as the .label-text */
    align-items: center;
    padding-left: 20px;
}

.item > .label-text {
    background-color: silver;
    color: white;
    padding: 0 10px;
    display: flex;
    flex: 1; /* added */
    align-items: center;
    justify-content: center; /* added */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>

答案 2 :(得分：1)

您可以为该标签文本定义宽度。

＆＃13;
＆＃13; 
.container {
    width: 600px;
}

.label-text {
   width: 150px;
}

.row {
    margin-bottom: 10px;
}

.item {
    width: 100%;
    border: 1px solid silver;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    flex: 1 1 0;
}

.item > .selector {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.item > .label-text {
    background-color: silver;
    color: white;
    padding: 0 10px;
    display: flex;
    align-items: center;
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 1</span>
                </div>
                <span class="label-text">Small Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 2</span>
                </div>
                <span class="label-text">longer Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 3</span>
                </div>
                <span class="label-text">Soo long Text</span>
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7 col-xs-12">
            <label class="item">
                <div class="selector">
                    <input type="radio" />
                    <span>Option 4</span>
                </div>
                <span class="label-text">Text</span>
            </label>
        </div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题