jonpfl jonpfl - 1 month ago 5
CSS Question

HTML div tags on the same line

I am trying to get some HTML code side by side and not having any luck. Pretty new to this stuff.

Here is the code (please disregard the border stuff, that is just there to help me). I force a specific width (250px) so I can guarantee buttons stay on one line because the html to the right of button can be hidden depending on the options.



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





enter image description here

Answer

Just add display:flex to your container and flex-grow: 1 to your 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>

You can also remove the float:right from your button div as it now makes no difference if it is there or not

Comments