优化对象的宽度

Question

早晨

我想知道是否有人可以给我一些有关对象大小调整的指导。

我正在任何地方使用调查，并想创建一个matrix.grid样式的问题，但这不是内置函数。

因此，我知道过去几周来我很少花CSS来试图使问题看起来像这样，所以我几乎对结果感到满意。

请在此处查看示例：https://s.surveyanyplace.com/s/sbkjpfqb?mode=preview&token=ad21a7bdc1f6354bae5d743659e91b11

我遇到的问题是列的对齐方式。一旦我减小屏幕尺寸，对齐方式就会消失。我已经仔细考虑了所有可以想到的内容，并尝试了所有操作，但不知道如何解决。

我希望这些行等于内部容器或div.answers-container.container的宽度（在这种情况下为25％）。但是我不确定是否可以或应该这样做。

感谢您提供的任何指导。请参阅下面有关我创建的代码的信息。

    #question-2 .text-choice .answer,
    #question-3 .text-choice .answer,
    #question-4 .text-choice .answer,

#question-5 .text-choice .answer {
    height: 20px;
    display: inline-grid;
    vertical-align: top;
    text-align:center;
}
#question-2 .text-choice .answer .answer-content,
#question-3 .text-choice .answer .answer-content,
#question-4 .text-choice .answer .answer-content,
#question-5 .text-choice .answer .answer-content {
    border: none;
    padding: 0.5cm 0 0 0;
}
#question-2 .text-choice .radio:checked + .answer-content,
#question-3 .text-choice .radio:checked + .answer-content,
#question-4 .text-choice .radio:checked + .answer-content,
#question-5 .text-choice .radio:checked + .answer-content {
    background: none;
    color: inherit;
}

#question-2 .text-choice .radio:checked + .answer-content:before,
#question-3 .text-choice .radio:checked + .answer-content:before,
#question-4 .text-choice .radio:checked + .answer-content:before,
#question-5 .text-choice .radio:checked + .answer-content:before {
    content: '';
    display: none;
}
#question-2 .text-choice .answer label,
#question-3 .text-choice .answer label,
#question-4 .text-choice .answer label,
#question-5 .text-choice .answer label {
    display: none;
}
/* force rows label to be a fixed width */
#question-2 .card-content-item > div.text-container.container > div,
#question-3 .card-content-item > div.text-container.container > div,
#question-4 .card-content-item > div.text-container.container > div,
#question-5 .card-content-item > div.text-container.container > div {
    width:70vmin;
}
/* force rows to be a fixed uniform height */
#question-2 .card-content-item,
#question-3 .card-content-item,
#question-4 .card-content-item,
#question-5 .card-content-item {
    display: inline-grid;
    width: 100vmin;
}

/* hide labels and add fixed width to each answer for alignment of columns */
#question-3 .answer-content,
#question-4 .answer-content,
#question-5 .answer-content {
    font-size: 0;
    width: 12.5vmin;
   }

/* dummy question - labels */
#question-2 .answer-content {
    width: 12.5vmin;
    text-align: center;
    font-size: 12px;
    color: #fcd404;
}

/* dummy question - hide radio btn */
#question-2 .text-choice .answer {
    background: none;
}

/* dummy question - add space at bottom of radio labels column headers */
#question-2 {
    margin-bottom: -20px; 
}

/* don't show hr line */
hr {
    opacity: 0;
    margin-bottom: -10px
}

/* don't show hr margin*/
.theme-font-size-small hr {
    margin: 0;
}

/* less margin above radio button to that it can align to top of row */
#question-2 .card-content .container + div, .card-content .container > .container, 
#question-3 .card-content .container + div, .card-content .container > .container,
#question-4 .card-content .container + div, .card-content .container > .container,
#question-5 .card-content .container + div, .card-content .container > .container {
    margin-top: 0;
}
#question-2 .radio:checked,
#question-3 .radio:checked,
#question-4 .radio:checked,
#question-5 .radio:checked {
background: red !important;
height: 18px;
width: 18px;
opacity: 1;border: 2px solid #ccc;
}
#question-2 .card .card-body .card-content label.answer .answer-content,
#question-3 .card .card-body .card-content label.answer .answer-content,
#question-4 .card .card-body .card-content label.answer .answer-content,
#question-5 .card .card-body .card-content label.answer .answer-content {
padding-top: 43px;
}
#question-2 .card .card-body .card-content.card-content-item,
#question-3 .card .card-body .card-content.card-content-item,
#question-4 .card .card-body .card-content.card-content-item,
#question-5 .card .card-body .card-content.card-content-item {
    width: 100%;
}
#question-2 .answer-content {
    padding-top: 20px;
}
.card .card-body .card-content #question-2 label.answer input { 
    display: none;
}