html - flexbox 元素宽度缩小到文本

Question

这段代码试图缩小单选按钮标签，它是一个用“黄色”着色的 span 标签，以匹配单选图标右侧的字符串。

当前的问题是 span' 太靠近下一个单选图标，如果移动用户想要单击第二个图标可能会误点击第一个单选按钮，因为 span` 是也可点击。

.radio-group {
    background-color: red;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

.radio-item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    align-items: baseline;
}

.radio-icon {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.radio-label {
    background-color: yellow;
    -webkit-flex: 15;
    -ms-flex: 15;
    flex: 15;
}

<template name="radio">
  <div class="radio-group">
    {{#each value}}
      <label class="radio-item">
        <input class="radio-icon" type="radio" name={{group}} checked={{value}} value={{name}}>
        <span class="radio-label">{{caption}}</span>
      </label>
    {{/each}}
  </div>
</template>

Answer 1

只需在 radio-item 上使用一些边距，如下所示。

.radio-item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    align-items: baseline;
    margin-right:30px; /* add margin here */
}

.radio-group {
    background-color: red;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

.radio-item {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    align-items: baseline;
    margin-right:30px;
}

.radio-icon {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.radio-label {
    background-color: yellow;
    -webkit-flex: 15;
    -ms-flex: 15;
    flex: 15;
}

<div name="radio">
  <div class="radio-group">
      <label class="radio-item">
        <input class="radio-icon" type="radio" name={{group}} checked={{value}} value={{name}}>
        <span class="radio-label">{{caption}}</span>
      </label>
      <label class="radio-item">
        <input class="radio-icon" type="radio" name={{group}} checked={{value}} value={{name}}>
        <span class="radio-label">{{caption}}</span>
      </label>
  </div>
</div>