在下面的代码中，我想在 label 旁边显示 See Example 但它总是显示在新行中。为什么？以下是演示 - 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%;
}
最佳答案
发现问题。选择器不正确。 small 和# 之间不应有任何空格。选择器应如下所示:
small#help {
display: inline;
}
关于html - 无法将 `small` 标记与 `label` 标记内联，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51578952/