CSS Width won't apply to <ul> <li> <label> and such

Question

I have a few issues that needs dealing with. I have been trying for a few hours and searching the net but can find nothing relevant.

• List item width - as you can see the width of each answer is set to auto, and no matter where i set width in <label> <li> or <ul> the width stays auto

• Text in the question container will not center.

I have been following from examples and customizing everything to my needs. If you guys have suggestions on how to make this better as my coding skill are not great.

EDIT: Sorry, forgot to include my jsFiddle

http://jsfiddle.net/u48spccg/

Answer 1

In your fiddle there is the CSS rule

.answers ul li {
  display: inline;
}

and inline elements can't have their width specified.

As mentioned, you need to override this style with display: inline-block , or float: left (which implicitly gives it block display).

display: block without the floating will make them stack vertically as you have observed.

When it comes to the centering of the question text, a simple

.question {
  text-align: center; 
}

will do the trick. In your fiddle it looks a bit funny though as the parent it's centering relative to is very wide and is overflowing the page to the right.

Answer 2

<label> ， <li>和<ul>标签是list-item元素，就像inline元素一样，您不能为它们设置宽度，这将不起作用...如果要更改它们的状态，请使其display:block或display:inline-block 。

Answer 3

There are three possibilities:

add

label, ul, li{
    display: block;
}

OR

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

OR

label, ul, li{
    float: left;
}

all three solutions will affect the behavior of how these elements will be displayed. For centering your text add text-align: center to your elements, but this will only work for block-elements. Inline-Elements just claim the space of it's content. Because of that there is no space for centering the content.

For your list-items, remove the display:inline and add float:left or add display:inline-block (without floating)

See here for further information

Answer 4

The elements are inline so setting the width won't work. You could try inline-block , but then you will end up setting a fixed width for the li and it won't look good if the text is small but the label width is wide.

Instead try setting padding to the label which should give enough space around the text. If you like add a margin to the li so that there is a space between each answer.

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; } 

I recommend you reading about box model at https://developer.mozilla.org/en-US/docs/Web/CSS/box_model - This should help you understand the above solution better.

 // 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

You do need to change them to block or inline-block.

Here's the modified jsfiddle with one option for style changes embedded inline:

    <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/

Per a comment you made:

@Vega yes, and setting them to display:block makes the answers vertical when I need them to be horizontal

You'll need to either use inline-block to make them sit next to each other or do block with a float:left; You may want to look into how grid system are built (eg Bootstrap 3) for some good examples. If you need further clarification, let me know.