英文:
SCSS set width based on classes
问题
我有一个HTML：
<!-- 开始代码段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
.layout-20X80 {
div.label-txt {
width: 20%;
}
div.value-container {
width: 80%;
}
}
.layout-30X70 {
div.label-txt {
width: 30%;
}
div.value-container {
width: 70%;
}
}
.layout-40X60 {
div.label-txt {
width: 40%;
}
div.value-container {
width: 60%;
}
}
<!-- 语言：lang-html -->
<div class="dync-template tmp-bg layout-20X80">
<div class="label-txt">Select Your Response</div>
<div class="value-container">
<mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
<button class="lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup" mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
</mt-buttongroup>
</div>
</div>
<!-- 结束代码段 -->
我有多个类.layout-20X80, .layout-30X80等，所以根据这些类添加到父div中，我需要标签和值容器相邻或相互下方。但是，即使我添加.layout-50X50（两者都是50%），它们仍然相互下方。这是因为块元素吗？有没有更好的解决方案来解决这个问题？另外，如何避免这种重复的CSS？
英文:
I've an HTML
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.layout-20X80 {
div.label-txt {
width: 20%;
}
div.value-container {
width: 80%
}
}
.layout-30X70 {
div.label-txt {
width: 30%
}
div.value-container {
width: 70%
}
}
.layout-40X60 {
div.label-txt {
width: 40%
}
div.value-container {
width: 60%
}
}
<!-- language: lang-html -->
<div class="dync-template tmp-bg layout-20X80">
<div class="label-txt">Select Your Response</div>
<div class="value-container">
<mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
<button class=" lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup" mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
</mt-buttongroup>
</div>
</div>
<!-- end snippet -->
I've multiple classes .layout-20X80, .layout-30X80 etc so based on the classes If I add to the parent div, I need label and value container adjacent to each other/one below the other. But even If I add .layout-50X50 (50% for both) they both stay one below the other. Is it because of block element? Any better solution to resolve it? Also, how can I avoid this repetitive CSS
答案1
得分: 0
块级元素始终紧挨在一起，即使有空间给它们。您需要将它们的 display 属性设置为 inline-block，以显示为内联元素，但仍保留块级元素属性（如接受 width 和 height）。
[class*="layout-"] div {
display: inline-block;
/*
* 使用浮动来消除内联块之间的空白间隙。
* 有很多方法可以做到这一点。例如，浮动元素将被从 DOM 流中弹出
*/
float: left;
}
.layout-20X80 div.label-txt {
width: 20%;
}
.layout-20X80 div.value-container {
width: 80%;
}
<div class="dync-template tmp-bg layout-20X80">
<div class="label-txt">Select Your Response</div>
<div class="value-container">
<mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
<button class=" lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup" mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
</mt-buttongroup>
</div>
</div>
英文:
Block elements always stays one after another, even if there is space for them. You need to set their display property to be inline-block to be shown as inline elements, but still keep block element properties (like accepting width and height)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
[class*="layout-"] div {
display: inline-block;
/*
* Using float to remove gap from whitespace between inline-blocks.
* There is plenty of approaches. E.g. floated elements will be poped out of DOM flow
*/
float: left;
}
.layout-20X80 div.label-txt {
width: 20%
}
.layout-20X80 div.value-container {
width: 80%
}
<!-- language: lang-html -->
<div class="dync-template tmp-bg layout-20X80">
<div class="label-txt">Select Your Response</div>
<div class="value-container">
<mt-buttongroup toggle selectionMode="single" id="mtBtnRadioGroup" segmentedControl>
<button class=" lmn-btn-default" *ngFor="let enum of fieldData.radioBtnGroup" mtButton (click)="singleSelect(1)" [active]="enum.name==selectedItem">{{enum.name}}</button>
</mt-buttongroup>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论