我尝试了3个不同的内联表单例子都没有成功。在这一点上，我只能怀疑它是CSS文件中的东西，但我不能弄清楚。每一次尝试都产生了相同的UI，如下图所示。
我试图让表单顶部的四个元素与占位符内联显示，但没有标签，并能够为每个输入分配单独的宽度。
我正在扩展我有限的CSS和JS经验的过程中，所以请明确。
<html>
<head>
<META charset="utf-8">
<META NAME="viewport" content="width=device-width, initial-scale=1">
<TITLE>OldSchool Lister</TITLE>
<META NAME="Author" CONTENT="Griffin Web Design ®">
<META NAME="Copyright" CONTENT="© 2021 Griffin Web Design">
<META NAME="Description" CONTENT="Old School Lister (Grocery List et al)">
<META NAME="KeyWords" CONTENT="OldSchool, Old School, Lists, Lister, Grocery, Groceries">
<META NAME="Location" CONTENT="http://dangriffin.info/lister/">
<META NAME="Created" CONTENT="07/01/2022">
<LINK rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="grocery.css">
</head>
<BODY BACKGROUND="LegalPad.gif">
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD WIDTH="75" VALIGN="top">
<IMG SRC="OldSchoolIcon.png" WIDTH="50" HEIGHT="50" ALT="">
</TD>
<TD>
<IMG SRC="OldSchoolBanner.gif" WIDTH="280" HEIGHT="52" ALT=""><BR>
</TD>
</TR>
</TABLE>
<BR>
<main>
<form role="form">
<div class="row">
<div class="form-group col-xs-4">
<input type="text" class="form-control" id="item-input" placeholder="Item">
</div>
<div class="form-group col-xs-2">
<input type="number" class="form-control" id="quantity-input" placeholder="Qty">
</div>
<div class="form-group col-xs-2">
<input type="number" class="form-control" id="uom-input" placeholder="UoM">
</div>
<div class="form-group col-xs-1">
<button type="button" class="btn btn-success btn-add">+</button>
</div>
</form>
<div id="lists">
<ul id="shopping-list"></ul>
<p class="list__label">Cart <span class="quantity" id="bought-num"></span></p>
<ul id="bought-list"></ul>
</div>
</main>
<div class="push"></div>
</div>
<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<!-- Lodash JS - MIN finds the minimum value of an array -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<!-- Backbone JS - Listens for changes and renders UL -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js'></script>
<!-- Bootstrap CSS formatting library v3.3.7 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- All of the standard js for this app -->
<SCRIPT SRC="./grocery.js"></SCRIPT>
</body>
</html>
form {
width : inherit;
}
label {
display : inline;
line-height : 1.5em;
}
input { /* All input boxes */
width : inherit;
padding : .25em;
}
.delete,
button {
color : white;
background-color : #FF0000;
}
button { /* ADD button */
border : 5;
padding : .25em;
width : inherit;
margin : 0.75em 0;
}
#bought-list li:before, #shopping-list li:before {
content : "";
display : inline;
background-size : 100%;
height : 0.9em;
width : 1em;
margin-right : 0.3em;
}
.row > div {
display: inline-block;
}
#shopping-list li:before {
background-image: url("./checkmark2.svg");
}
#bought-list li:before {
background-image: url("./checkmark.svg");
}
ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
li {
color: #004A55;
padding: 0.25em;
margin: 0em 0;
position: relative;
transition: background-color 0.2s;
}
.quantity {
color: #004A55; /* All numbers */
}
.quantity:before { /* All numbers */
content: "(";
}
.quantity:after { /* All numbers */
content: ")";
}
.delete {
float: right;
padding: inherit;
position: absolute;
right: 0;
top: 0;
}
.delete:after {
clear: both;
}
#bought-list li {
background-color: #F6F6F6;
}
#bought-list li .quantity {
color: #666666;
}
.list__label {
border-bottom: 2px solid #ff0303;
font-size: 1em;
color: #004A55;
padding: 0;
}还有一个.js文件，我可以张贴，如果你觉得有必要。
Original post output
Output after suggested changes
1条答案
按热度按时间fdx2calv1#
如注解中所述，您需要使用显示器：内嵌块
因为我没有看到“form-group col-xs-4”和其他的css，所以我将显示添加到.row类中的所有div。
第一个