Question

在以下代码中，我想在See Example旁边显示label，但它总是以换行显示。为什么？以下是演示-https://codepen.io/manuchadha/pen/PBKYBJ

代码是

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/"> 
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="fiddle.css">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


</head>
<body>

  <div class="css-grid-container"> <!-- 3 rows, 1 column--> 
    <div id="app-nav-component" class=" common-styles-div--white">NAV</div> <!-- 1st row of css-grid-containerr-->

  <div id="form-div" class="body__div--background"> 

    <form id="new-form" novalidate>
      <!-- label and small in same line. select in a new line, thus enclosed select in a div-->
      <div class="form-group">
      <label for="language-selector" class="control-label required">Select Language </label> 
      <small id="help" class="form-text text-muted"><a href="#">See Example</a></small> 
      <div>
        <select id="language-selector"  class="selectpicker" multiple>
          <option>Eng</option>
          <option>French</option>
          <option>German</option>
        </select>
      </div>
      </div>

      <button type="submit"  id="submit-button" class="content-div__button--blue"> Submit! </button>
    </form>
</div>


    <div id="app-footer-component" class="common-styles-div--white">FOOTER</div> <!-- 3rd row of css-grid-containerr-->
    <!-- grid child -->
  </div>

</body>

CSS

body{
  margin:0px;
}

.css-grid-container{
  height:100vh; /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

.body__div--background {
  background: linear-gradient(45deg,#33b1f8 37%,#6e90f6 100%); /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color:#555555;
  font-family: Helvetica;
  line-height:1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}



div#app-nav-component{ /*1st row, all columns*/
 grid-column:1/-1;
  grid-row:1/2;  
}



div#homepage-top-div{ /*2nd row, all columns*/
  grid-column:1/-1;
  grid-row:2/3;  
}

div#app-footer-component{ /*3rd row, all columns*/
 grid-column:1/-1;
  grid-row:3/4;   
}



small #help  {
  display:inline;
}



/*specify height of both to make the form take entire space.*/
form #form-div #new-question-form{
  height:100%;
}

Answer 1

发现了问题。选择器不正确。 small和#之间不应有空格。选择器应如下所示：

small#help {
  display: inline;
}

Answer 2

这是因为form-text设置为display：block，因此从下一行开始。

.form-text {
    display: inline-block;
    margin-top: .25rem;
}

删除此样式或将其更改为display: inline-block

body {
  margin: 0px;
}

.css-grid-container {
  height: 100vh;
  /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr;
  /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

.body__div--background {
  background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
  /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color: #555555;
  font-family: Helvetica;
  line-height: 1.5;
  font-size: 11px;
  letter-spacing: 0.25px;
}

div#app-nav-component {
  /*1st row, all columns*/
  grid-column: 1/-1;
  grid-row: 1/2;
}

div#homepage-top-div {
  /*2nd row, all columns*/
  grid-column: 1/-1;
  grid-row: 2/3;
}

div#app-footer-component {
  /*3rd row, all columns*/
  grid-column: 1/-1;
  grid-row: 3/4;
}

small #help {
  display: inline;
}


/*specify height of both to make the form take entire space.*/

form #form-div #new-question-form {
  height: 100%;
}

.form-text {
  display: inline-block !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <base href="/">
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="fiddle.css">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>


</head>

<body>

  <div class="css-grid-container">
    <!-- 3 rows, 1 column-->
    <div id="app-nav-component" class=" common-styles-div--white">NAV</div>
    <!-- 1st row of css-grid-containerr-->

    <div id="form-div" class="body__div--background">

      <form id="new-form" novalidate>
        <!-- label and small in same line. select in a new line, thus enclosed select in a div-->
        <div class="form-group">
          <label for="language-selector" class="control-label required">Select Language </label>
          <small id="help" class="form-text text-muted"><a href="#">See Example</a></small>
          <div>
            <select id="language-selector" class="selectpicker" multiple>
              <option>Eng</option>
              <option>French</option>
              <option>German</option>
            </select>
          </div>
        </div>

        <button type="submit" id="submit-button" class="content-div__button--blue"> Submit! </button>
      </form>
    </div>


    <div id="app-footer-component" class="common-styles-div--white">FOOTER</div>
    <!-- 3rd row of css-grid-containerr-->
    <!-- grid child -->
  </div>

</body>

无法将“小”标签与“标签”标签内联

2 个答案: