在同一行上的HTML div標籤

我試圖讓一些HTML代碼並排，沒有任何運氣。這個東西很新。在同一行上的HTML div標籤

這裏是代碼（請忽略邊界的東西，這只是在那裏幫助我）。我強制一個特定的寬度（250像素），所以我可以保證按鈕保持在一行，因爲按鈕右側的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>

來源

2016-11-04 jonpfl

不確定是否可以看到圖像，希望它可以上傳，以便人們可以查看它。 – jonpfl

。指令{float}：left; margin：0; } – jonpfl

@KaanBurakSener他們是內嵌的 – Pete

只需添加display:flex您的容器和flex-grow: 1你UL：

<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>

您也可以從您的按鈕div中刪除float:right，因爲它現在沒有區別

來源

2016-11-04 14:24:56 Pete

謝謝皮特!!!!! – jonpfl

不客氣：o） – Pete

請嘗試此代碼。

<!doctype HTML> 
 
<html> 
 
    <head> 
 
    <script> 
 
\t 
 
    </script> 
 
    </head> 
 
    <body> 
 
     <div style="width: 100%; float: left; flex:0 0 auto;border:1px dashed green;"> 
 
\t \t \t <ul class="instructions" style="width: 40%; float: left;border:3px dashed blue; margin: 0"> 
 
\t \t \t \t <li> 
 
\t \t \t \t <strong>Instructions:</strong> 
 
\t \t \t \t <span data-bind="html: instructionLabelView"></span> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t \t <div style="border:1px solid red;text-align:right;vertical-align:top;float:right;"> 
 
\t \t \t \t <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> 
 
\t \t \t \t <button type="reset" title="Reset all search criteria.">Reset</button> 
 
\t \t \t \t <button type="submit" title="Submit a search for results that match your defined criteria above." data-bind="enable: !$root.isSearching()">Search</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
    </body> 
 
</html>

來源

2016-11-04 14:34:41 Nitheesh

-2

我希望這將有助於。

在造型中使用display:flex;可以在一行上獲得內容。

您還可以更改flex的方向。

參照這個網站最好的examples。

來源

2016-11-04 14:37:15 Mikehenry

在同一行上的HTML div標籤

回答

相關問題