Question

已要求我解决一个我不了解的问题。有人可以友善地看看这个fiddle吗？

缩小输出窗格的宽度以使最后一个问题被迫多行时，伴随的跨度.checkmark不再是圆形而是椭圆形。

body {
  background-color: white;
  color: black;
  font-weight: 400;
  font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
  margin: 0px;
}

.header-container {
  padding: 1px;
  text-align: left;
  color: white;
}

.header-txt {
  font-size: 15px;
  margin: 5px 11px 4px 11px;
  display: inline-block;
}

/* Format Question text  */

.question-container {
  flex: 1 1 auto;
  margin: auto;
  display: flex;
  padding-bottom: 5px;
}

.question-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  margin-bottom: 3px;
  font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}

/* Format pages */

.question-page {
  font-size: 12px;
  margin: 10px 10px 10px 10px;
  padding-bottom: 10px;
}

/* Question options format */
.option-container {
  display: flex;
  position: relative;
  padding-left: 0px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.option-container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: relative;
  height: 15px;
  width: 15px;
  background-color: #D3D3D3;
  border-radius: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 15px;
}

.option-container:hover input~.checkmark {
  background-color: #A9A9A9;
}

.option-container:hover {
  background-color: #F8F8F8;
}

.option-container input:checked~.checkmark {
  background-color: #dd2a30;
}

<div id="survey">

  <div class="header-container">
    <span class="header-txt">A question for you...</span>
  </div>

  <div id="question-body" class="modal-body">

    <div id="q1" class="question-page">

      <div class="question-container">
        <span class="question-text">What is your relationship <br> with [brand]?</span>
      </div>

      <div class="option-container"><span class="checkmark"></span>Not a brand I'm familiar with
         <input class="question-option" type="radio" name="q1" value="1">
      </div>
      <div class="option-container"><span class="checkmark"></span>I'm familiar, but not interested
         <input class="question-option" type="radio" name="q1" value="2">
      </div>
      <div class="option-container"><span class="checkmark"></span>A brand I would consider purchasing
         <input class="question-option" type="radio" name="q1" value="3">
      </div>
      <div class="option-container"><span class="checkmark"></span>My most preferred [product category] 
         <input class="question-option" type="radio" name="q1" value="4">
      </div>
      <div class="option-container"><span class="checkmark"></span>I plan to purchase [brand] when next buying [product category]
         <input class="question-option" type="radio" name="q1" value="5">
      </div>
    </div>
  </div>
</div>

Answer 1

这是因为，当内容超出可用空间时，默认情况下，flexbox项会尝试缩小到可用空间-将flex-shrink: 0添加到{{1} }-参见下面的演示-

checkmark

body {
  background-color: white;
  color: black;
  font-weight: 400;
  font-family: telesans_text, Arial, Verdana, Helvetica, sans-serif;
  margin: 0px;
}

.header-container {
  padding: 1px;
  text-align: left;
  color: white;
}

.header-txt {
  font-size: 15px;
  margin: 5px 11px 4px 11px;
  display: inline-block;
}


/* Format Question text  */

.question-container {
  flex: 1 1 auto;
  margin: auto;
  display: flex;
  padding-bottom: 5px;
}

.question-text {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  margin-bottom: 3px;
  font-family: telesans_head, Verdana, Arial, Helvetica, sans-serif;
}


/* Format pages */

.question-page {
  font-size: 12px;
  margin: 10px 10px 10px 10px;
  padding-bottom: 10px;
}


/* Question options format */

.option-container {
  display: flex;
  position: relative;
  padding-left: 0px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.option-container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  flex-shrink: 0; /* ADDED */
  position: relative;
  height: 15px;
  width: 15px;
  background-color: #D3D3D3;
  border-radius: 50%;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 15px;
}

.option-container:hover input~.checkmark {
  background-color: #A9A9A9;
}

.option-container:hover {
  background-color: #F8F8F8;
}

.option-container input:checked~.checkmark {
  background-color: #dd2a30;
}

宽度狭窄时元素受到挤压

1 个答案: