Question

我试图并排获得一些HTML代码而没有任何运气。这个东西很新鲜。

这是代码（请忽略边框内容，就是帮助我）。我强制一个特定的宽度（250px），所以我可以保证按钮保持在一行，因为根据选项可以隐藏按钮右侧的html。

<div style="flex:0 0 auto;border:1px dashed green;">
  <ul class="instructions" style="border:3px dashed blue;">
    <li>
      <strong>Instructions:</strong>
      <span data-bind="html: instructionLabelView"></span>
    </li>
  </ul>
  <div style="width:250px;border:1px solid red;text-align:right;vertical-align:top;float:right;">
    <button type="button" class="webcms-button-default" title="Submit a request to start a new report in the database." data-bind="click: onNewReportButtonActivated, visible: hasSearched() && !hasResults() && $root.startNewReportEnabled()">Start New Report</button>
    <button type="reset" class="webcms-button-default" title="Reset all search criteria.">Reset</button>
    <button type="submit" class="webcms-button-default" title="Submit a search for results that match your defined criteria above." data-bind="enable: !$root.isSearching()">Search</button>
  </div>
</div>

Answer 1

只需将type='button'添加到您的容器中，然后display:flex添加到您的ul：

flex-grow: 1

您也可以从按钮div中移除<div style="flex:0 0 auto;border:1px dashed green;display:flex;"> <ul class="instructions" style="border:3px dashed blue;flex-grow:1;"> <li> <strong>Instructions:</strong> <span data-bind="html: instructionLabelView"></span> </li> </ul> <div style="width:250px;border:1px solid red;text-align:right;vertical-align:top;"> <button type="button" class="webcms-button-default" title="Submit a request to start a new report in the database." data-bind="click: onNewReportButtonActivated, visible: hasSearched() && !hasResults() && $root.startNewReportEnabled()">Start New Report</button> <button type="reset" class="webcms-button-default" title="Reset all search criteria.">Reset</button> <button type="submit" class="webcms-button-default" title="Submit a search for results that match your defined criteria above." data-bind="enable: !$root.isSearching()">Search</button> </div> </div>，因为它现在没有区别

Answer 2

请尝试此代码。

<!doctype HTML>
<html>
  <head>
    <script>
	
    </script>
    </head>
    <body>
        <div style="width: 100%; float: left; flex:0 0 auto;border:1px dashed green;">
			  <ul class="instructions" style="width: 40%; float: left;border:3px dashed blue; margin: 0">
				<li>
				  <strong>Instructions:</strong>
				  <span data-bind="html: instructionLabelView"></span>
				</li>
			  </ul>
			  <div style="border:1px solid red;text-align:right;vertical-align:top;float:right;">
				<button type="button" title="Submit a request to start a new report in the database." data-bind="click: onNewReportButtonActivated, visible: hasSearched() && !hasResults() && $root.startNewReportEnabled()">Start New Report</button>
				<button type="reset" title="Reset all search criteria.">Reset</button>
				<button type="submit" title="Submit a search for results that match your defined criteria above." data-bind="enable: !$root.isSearching()">Search</button>
			  </div>
		</div>
    </body>
</html>

Answer 3

我希望这会有所帮助。

在样式中使用<c:forEach var="customer" items="CustomersList"> <c:out value="${customer.id}" /> <c:out value="${customer.userName}" /> <c:out value="${customer.password}" /> <c:out value="${customer.email}" /> </c:forEach>来获取一行内容。

您还可以更改弹性方向。

请参阅此网站以获取最佳examples。

HTML div标签位于同一行

3 个答案: