Merge pull request #7593 from jolyonb/jolyonb/inline-div

CSS: Fixing spans inside inline divs (capa)

common/lib/xmodule/xmodule/css/capa/display.scss

-// capa - styling 
+// capa - styling
 // ====================
 
-// Table of Contents 
+// Table of Contents
 // * +Variables - Capa
 // * +Extends - Capa
 // * +Mixins - Status Icon - Capa
@@ -19,14 +19,14 @@
 // * +Problem - Image Input Overrides
 
 // +Variables - Capa
-// ==================== 
+// ====================
 $annotation-yellow: rgba(255,255,10,0.3);
 $color-copy-tip: rgb(100,100,100);
 $correct: $green-d1;
-$incorrect: $red; 
+$incorrect: $red;
 
 // +Extends - Capa
-// ==================== 
+// ====================
 // Duplicated from _mixins.scss due to xmodule compilation, inheritance issues
 %use-font-awesome {
   font-family: FontAwesome;
@@ -36,9 +36,9 @@ $incorrect: $red;
 }
 
 // +Mixins - Status Icon - Capa
-// ==================== 
+// ====================
 @mixin status-icon($color: $gray, $fontAwesomeIcon: "\f00d"){
-  
+
   &:after {
     @extend %use-font-awesome;
     @include margin-left(17px);
@@ -49,7 +49,7 @@ $incorrect: $red;
 }
 
 // +Resets - Deprecate Please
-// ==================== 
+// ====================
 h2 {
   margin-top: 0;
   margin-bottom: ($baseline*0.75);
@@ -123,7 +123,7 @@ div.problem-progress {
 }
 
 // +Problem - Base
-// ==================== 
+// ====================
 div.problem {
   @media print {
     display: block;
@@ -141,7 +141,7 @@ div.problem {
 }
 
 // +Problem - Choice Group
-// ==================== 
+// ====================
 div.problem {
   .choicegroup {
     @include clearfix();
@@ -163,7 +163,7 @@ div.problem {
         @include status-icon($correct, "\f00c");
         border: 2px solid $correct;
 
-        // keep green for correct answers on hover. 
+        // keep green for correct answers on hover.
         &:hover {
           border-color: $correct;
         }
@@ -173,7 +173,7 @@ div.problem {
         @include status-icon($incorrect, "\f00d");
         border: 2px solid $incorrect;
 
-        // keep red for incorrect answers on hover. 
+        // keep red for incorrect answers on hover.
         &:hover {
           border-color: $incorrect;
         }
@@ -206,10 +206,10 @@ div.problem {
   }
 }
 
-// +Problem - Status Indicators 
-// ==================== 
-// Summary status indicators shown after the input area 
-div.problem { 
+// +Problem - Status Indicators
+// ====================
+// Summary status indicators shown after the input area
+div.problem {
 
   .indicator-container {
 
@@ -240,8 +240,8 @@ div.problem {
 }
 
 // +Problem - Misc, Unclassified Mess
-// ==================== 
-div.problem { 
+// ====================
+div.problem {
   ol.enumerate {
     li {
       &:before {
@@ -422,7 +422,7 @@ div.problem {
           background: #f1f1f1;
         }
       }
-    } 
+    }
 
     // Hides equation previews in symbolic response problems when printing
     [id^='display'].equation {
@@ -577,6 +577,12 @@ div.problem {
     }
   }
 
+  div.inline {
+    > span {
+      display: inline;
+    }
+  }
+
   ul {
     margin-bottom: lh();
     margin-left: .75em;
@@ -699,10 +705,10 @@ div.problem {
 }
 
 // +Problem - Text Input, Numerical Input
-// ==================== 
+// ====================
 .problem {
   .capa_inputtype.textline, .inputtype.formulaequationinput {
-    
+
     input {
       @include box-sizing(border-box);
       border: 2px solid $gray-l4;
@@ -723,7 +729,7 @@ div.problem {
     // CASE: incorrect answer
     > .incorrect {
 
-      input { 
+      input {
         border: 2px solid $incorrect;
       }
 
@@ -734,8 +740,8 @@ div.problem {
 
     // CASE: correct answer
     > .correct {
-      
-      input { 
+
+      input {
         border: 2px solid $correct;
       }
 
@@ -747,7 +753,7 @@ div.problem {
     // CASE: unanswered
     > .unanswered {
 
-      input { 
+      input {
         border: 2px solid $gray-l4;
       }
 
@@ -760,7 +766,7 @@ div.problem {
 
 
 // +Problem - Option Input (Dropdown)
-// ==================== 
+// ====================
 .problem {
   .inputtype.option-input {
     margin: (-$baseline/2) 0 $baseline;
@@ -781,8 +787,8 @@ div.problem {
 }
 
 // +Problem - CodeMirror
-// ==================== 
-div.problem { 
+// ====================
+div.problem {
 
   .CodeMirror {
     border: 1px solid black;
@@ -836,7 +842,7 @@ div.problem {
 }
 
 // +Problem - Actions
-// ==================== 
+// ====================
 div.problem .action {
   margin-top: $baseline;
 
@@ -877,8 +883,8 @@ div.problem .action {
 }
 
 // +Problem - Misc, Unclassified Mess Part 2
-// ==================== 
-div.problem { 
+// ====================
+div.problem {
   hr {
     float: none;
     clear: both;
@@ -907,7 +913,7 @@ div.problem {
     padding: lh();
     border: 1px solid $gray-l3;
   }
-  
+
   .detailed-solution {
     > p:first-child {
       @extend %t-strong;
@@ -1159,7 +1165,7 @@ div.problem {
 
 
 // +Problem - Rubric
-// ==================== 
+// ====================
 div.problem {
   .rubric {
     tr {
@@ -1216,7 +1222,7 @@ div.problem {
 }
 
 // +Problem - Annotation
-// ==================== 
+// ====================
 div.problem {
   .annotation-input {
     margin: 0 0 1em 0;
@@ -1318,7 +1324,7 @@ div.problem {
 }
 
 // +Problem - Choice Text Group
-// ==================== 
+// ====================
 div.problem {
   .choicetextgroup {
     @extend .choicegroup;