Question

我有一些需要处理的问题。我已经尝试了几个小时并在网上搜索，但没有找到任何相关内容。

列出项目宽度 - 正如您所看到的，每个答案的宽度都设置为自动，无论我在<label> <li>或<ul>宽度设置宽度保持自动
问题容器中的文字不会居中。

我一直关注示例并根据自己的需要定制所有内容。如果你们的编码技巧不是很好，那么你们就如何做得更好有建议。

编辑：对不起，忘了包含我的jsFiddle

Answer 1

在你的小提琴中有CSS规则

.answers ul li {
  display: inline;
}

并且内联元素的宽度不能指定。

如上所述，您需要使用display: inline-block或float: left覆盖此样式（隐式显示块显示）。

没有浮动的

display: block将使它们垂直堆叠，如您所观察到的那样。

当谈到问题文本的中心时，一个简单的

.question {
  text-align: center; 
}

会做到这一点。在你的小提琴中，它看起来有点滑稽，虽然它的中心相对于它的父母很宽，并且页面溢出到右边。

Answer 2

<label>，<li>和<ul>标记为list-item元素，就像inline元素一样，您无法为它们设置宽度，也不会工作......如果你想改变他们的状态，可以让他们display:block或display:inline-block。

Answer 3

有三种可能性：

添加

label, ul, li{
    display: block;
}

OR

label, ul, li{
    display: inline-block;
}

OR

label, ul, li{
    float: left;
}

所有这三个解决方案都会影响这些元素的显示方式。要使文本居中，请将text-align: center添加到元素中，但这仅适用于块元素。 Inline-Elements只是声称它的内容空间。因此，没有空间来集中内容。

对于您的列表项，请移除display:inline并添加float:left或添加display:inline-block（不浮动）

有关详细信息，请参阅here

Answer 4

元素是内联的，因此设置宽度将不起作用。您可以尝试inline-block，但最后会为li设置固定宽度，如果文字很小但标签宽度很宽，则效果不佳。

而是尝试将padding设置为标签，该标签应在文本周围留出足够的空间。如果你愿意为li增加一个余量，那么每个答案之间都有一个空格。

DEMO： http://jsfiddle.net/s5493xvo/

/* space between your question and answer */
.questionContainer .answers { margin: 5px; } 
/* space between each answer */
.questionContainer .answers li { margin-right: 5px; } 
/* space between the text and label */ 
.questionContainer .answers li label { padding: 5px 10px; }

我建议您在https://developer.mozilla.org/en-US/docs/Web/CSS/box_model阅读有关盒子模型的内容 - 这可以帮助您更好地理解上述解决方案。

// JavaScript and jQuery for interactive quiz follows
$(function(){
  // highlight question row on mouseover
  


$(function(){
      $('.answers label').click(function(e) {
            $('.answers label').removeClass('active');
            $(this).addClass('active');
        });
});



  var S2CQuiz = {
    init: function(){
        // next question
        $('.btnNext').on('click', function(){
            // Make sure a radio box has been checked
            if ($('input[type=radio]:checked:visible').length == 0) {
                $('.errMsg').show().fadeOut(1200);        
                return false;
            }
            $(this).parents('.questionContainer').fadeOut(500, function(){
                $(this).next().fadeIn(500);
            });
            var progBar = $('#progress');
            var numq = S2CQuiz.numQuestions();
            var progWidth = 0 / numq;
            progBar.width(progBar.width() + progWidth + 'px');
        });
        // previous question
        $('.btnPrev').on('click', function(){
            $(this).parents('.questionContainer').fadeOut(500, function(){
                $(this).prev().fadeIn(500);
            });
            var progBar = $('#progress');
            // Extract question number and calculate width
            var qString =  $(this).parents('.questionContainer').children()
                                  .first().children('strong').text();
            var numq = parseInt(qString.substr(9, 2));
            numq--;
            var progWidth = progBar.width() / numq;
            progBar.width(progBar.width() - progWidth + 'px');
        });
        // last question
        $('.btnShowResult').on('click', function(){
            // Make sure a radio box has been checked
            if ($('input[type=radio]:checked:visible').length == 0) {
                $('.errMsg').show().fadeOut(1200);        
                return false;
            }
            $('#progress').width(0);
            $('#progressContainer').hide();
        
            // Extract users answers to an array and call a function to check them
            var arr = $('input[type=radio]:checked');
            var ans = S2CQuiz.userAnswers = [];
            for (var i = 0; i < arr.length; i++) {
                ans.push(arr[i].getAttribute('id'));
            }
            var results = S2CQuiz.checkAnswers();
            // Loop through the 'right' or 'wrong' array extracting the results
            var resultSet = '';
            var rightCount = 0;
            for (var i = 0; i < results.length; i++){
               if (results[i] == "right") {
                   rightCount++;
                   resultSet += '<div> Question ' + (i + 1) + ' is ' + results[i] + '</div>';
               } else {
                   var expid = '#' + 'exp' + (i + 1); 
                   var exp = $(expid).text();
                   resultSet += '<div class="red"> Question ' + (i + 1) + ' is ' + results[i] 
                             + '<strong>' + exp + '</strong></div>';
               }
            }
            var numq = S2CQuiz.numQuestions();
            resultSet += '<div class="totalScore">You scored ' + rightCount + '/' +  numq + '</div>';
            $('#resultContainer').html(resultSet).show();
        });
    }, 
    answers: { q1: 'a', q2: 'a', q3: 'b' },
    // Check answers and output 'right' or 'wrong' to another array
    checkAnswers: function() {
        var arr = this.answers;
        var ans = this.userAnswers;
        var resultArr = [];
        for (var p in ans) {
            var x = parseInt(p) + 1;
            var key = 'q' + x;
            var flag = "wrong";
            if (ans[p] == 'q' + x + '-' + arr[key]) {
               flag = "right";
            }
            else {
               flag = "wrong";
            }
            resultArr.push(flag);
        }
        return resultArr;
    },
    // Calcualte number of question
    numQuestions: function() {
        var arr = this.answers;
        var x = 0;
        for (var p in arr) {
           if (p < 10) {
               x = parseInt(p.substr(1, 1));
           } else {
               x = parseInt(p.substr(1, 2));
           }
        }
        return x;
    }
  };
  S2CQuiz.init();
});

/* space between your question and answer */
.questionContainer .answers { margin: 5px; } 
/* space between each answer */
.questionContainer .answers li { margin-right: 5px; } 
/* space between the text and label */ 
.questionContainer .answers li label { padding: 5px 10px; } 

label
{
  background-color: Sienna ;
  border-radius: 8px;
  margin-right:auto; 
  margin-left:auto;
  width:50%;
}

label.active 
{
  background-color:Orchid ;
 

}

#textcont
{
  width: 80%;
  margin-left: auto;
  margin-right:auto;
 float: left
}

#header
{
  background-color: white;
  border-bottom-left-radius:80px ;
  border-bottom-right-radius:80px;
  box-shadow: 4px 4px 6px;

  margin:0;
     /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

}


.answers ul li 
{
  list-style-type:none;
  display: inline;
  margin-right:auto; 
  margin-left:auto;
  width:50%;
}

/* Reset browser styles */
h1, h2, p, div, ul, li, label, code, pre, body {
  margin:0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.txtStatusBar { 
  font-weight:bold;
  margin:auto;
 text-align: center
}
/* wrap main content */
#main {
 
  background-size: 100%;
  float:left;
  margin-right: auto;
  margin-left:auto;
  width: 100vw;
  height:70vh;
  background-image: url("bg.jpg");
  box-shadow: 3px 3px 10px grey;
}
/* Quiz heading */
h1 { 
  font-size: 200%;
  font-weight:bold;
  text-align: center;
  color:white;
  color:black;

}
/* Question container */
.questionContainer {
  margin-left:auto; 
  margin-right:auto;
  width: 900px;
  margin-top: 1em;
  padding:3px;
  border-radius: 4px;
  border: 1px solid black;
  box-shadow: 3px 3px 10px;
   /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";


}
/* Button container */
.btnContainer {
  margin:10px 0 10px 1%;
  width:98%;
}
.prev{float:left;}
.prev a, .next a {
  background:none repeat scroll 0 0 white;
  border:1px solid #000000;
  cursor:pointer;
  font-size:10px;
  font-weight:bold;
  padding:2px 5px;
}
.prev a:hover, .next a:hover {
  background:none repeat scroll 0 0 #36648B;
  color:white !important;
  text-decoration:none !important;
}
.next, .btnShowResult {float:right;}
.clear {clear:both;}
/* Progress bar */
.txtStatusBar { 
  font-weight:bold;
  margin-left:auto;
  margin-right: auto;
}
#progressContainer { 

  border:1px solid grey;
  height:20px;
  margin-left:auto;
  margin-right: auto;
  margin-top: 5em;
  padding:3px;
  width: 900px;
  border-radius:8px;
   box-shadow: 3px 3px 10px;
   /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(255, 255, 255, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
#progress {
  background:none repeat scroll 0 0 purple;
  height:20px;
  width:0;
  border-radius:5px;

}
/* Refined layout CSS */
.hide {display:none;}

.clear
{
  clear:both;
}

input {
  position:fixed;
  padding:0px;
  visibility: hidden;



}

#resultContainer {
  background:white;
 
 margin-left:auto;
  margin-right: auto;
  padding:3px;
  width:900px;
  border-radius:8px;
}
#resultContainer div {line-height:20px;}
/* Error message */
.errMsg {
  color:red;
 margin-left:auto;
  margin-right: auto;
  text-align: center
 
}
/* Question explanation and score highlight */
.red {color:red;}
.totalScore{font-weight:bold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main">
    <div class="questionContainer">
      <div class="question"><strong>Question 1 :</strong> What is my name?</div>
      <div class="answers" >
        <ul style="list-style-type:none">
            <li style="width:500px"><label >Paul<input type="radio" id="q1-a" name="q1" /> </label></li>
            <li><label>Jim<input type="radio" id="q1-b" name="q1" /> </label></li>
            <li><label>Bob<input type="radio" id="q1-c" name="q1" /> </label></li>
            <li><label>John<input type="radio" id="q1-d" name="q1" /> </label></li>
        </ul>
      </div>
      <div class="hide red" id="exp1"> - My name is Paul you fool!</div>
      <div class="btnContainer">
        <div class="prev"></div>
        <div class="next"><a class="btnNext">Next ++</a></div>
          <span class="errMsg hide" style="text-align:center;"><strong>Please select an answer</strong></span>
        <div class="clear"></div>

      </div>

    </div>
    <div class="questionContainer hide">
      <div class="question"><strong>Question 2 :</strong> Kildrummy is the best?</div>
      <div class="answers">
        <ul style="list-style-type:none"><li><label><input type="radio" id="q2-a" name="q2" /> true</label></li>
            <li><label><input type="radio" id="q2-b" name="q2" /> false</label></li></ul>
      </div>
      <div class="hide red" id="exp2"> - HOW DARE YOU.</div>
      <div class="btnContainer">
        <div class="prev"><a class="btnPrev">-- Prev</a></div>
        <div class="next"><a class="btnNext">Next ++</a></div>
          <span class="errMsg hide" style="text-align:center;"><strong>Please select an answer</strong></span>
        <div class="clear"></div>
      </div>
    </div>
    <div class="questionContainer hide">
      <div class="question"><strong>Question 3 :</strong> hi?</div>
      <div class="answers">
        <ul style="list-style-type:none">
        <li><label><input type="radio" id="q3-a" name="q3" /> hi</label></li>
        <li><label><input type="radio" id="q3-b" name="q3" /> hi</label></li>
        </ul>
      </div>
      <div class="hide red" id="exp3"> - hi.</div>
      <div class="btnContainer">
        <div class="prev"><a class="btnPrev">-- Prev</a></div>
        <div class="next"><a class="btnShowResult">Finish</a></div>
          <span class="errMsg hide" style="text-align:center;"><strong>Please select an answer</strong></span>
        <div class="clear"></div>
      </div>
    </div>
    
    <div id="progressContainer" style="display: block;">
      <div id="progress"></div>
    </div>
    <div class="hide" id="resultContainer"></div>
  </div>

Answer 5

您需要将它们更改为阻止或内联阻止。

这里是修改过的jsfiddle，其中一个选项用于嵌入内联的样式更改：

    <ul style="list-style-type:none">
        <li style="width:500px;display:block;"><label style='display:block' >Paul<input type="radio" id="q1-a" name="q1" /> </label></li>
        <li style="width:500px;display:block;"><label style='display:block'>Jim<input type="radio" id="q1-b" name="q1" /> </label></li>
        <li style="width:500px;display:block;"><label style='display:block'>Bob<input type="radio" id="q1-c" name="q1" /> </label></li>
        <li style="width:500px;display:block;"><label style='display:block'>John<input type="radio" id="q1-d" name="q1" /> </label></li>
    </ul>

http://jsfiddle.net/bwy9tcze/

根据您的评论：

@Vega是的，并将它们设置为display：block，当我需要它们为水平时，将答案垂直

你需要使用内联块来使它们彼此相邻或者用浮点块阻止：left;您可能想要了解如何构建网格系统（例如Bootstrap 3）以获得一些好的示例。如果您需要进一步澄清，请告诉我。

CSS宽度不适用于<ul> <li> <label>等</label> </li> </ul>

5 个答案: