1. 首頁
  2. 問答
  3. 如何在此示例中顯示div內聯

如何在此示例中顯示div內聯

2016-10-04 54 views
0

我試圖顯示3 div s內聯並嘗試使用容器div並將其設置爲使用inline-block但是，這並不奏效。我是否錯過了明顯的東西？如何在此示例中顯示div內聯

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div class="tablebox" id="box1" style="display: inline-block; border: solid 1px black; width:500px; height:200px;"> 
 
     <form class="form-horizontal"> 
 
      <fieldset> 
 
       <legend>Form</legend> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Fill this in</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Option 2</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
          <option value="2">Option 2</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
    <div id="example"> 
 
     <div style="width:100%; white-space:nowrap;"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
     </div> 
 
     <div id="wrapping"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      <div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
       <p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">Sort these</span></p> 
 
      </div> 
 
      <div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-10-04 John Tiso

+2

你的標籤是**所有的地方**。 –

+0

你試圖使內聯完全一致嗎？ –

+0

float：left？ – Tester

回答

-4

使用table標籤，並給每個TD每個格...

來源

2016-10-04 08:33:52 rch

+0

聽起來像它應該工作，不知道爲什麼我沒有想到這一點。謝謝 –

+0

實現了這一點，並運行良好 –

+0

這增加了更多的標記。 – lharby

0

難道這樣的事情，你想要什麼？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
<div class="tablebox" id="box1" style="display: inline-block; border: solid 1px black; width:500px; height:200px;"> 
 
\t <form class="form-horizontal"> 
 
\t \t <fieldset> 
 
\t \t \t <legend>Form</legend> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t \t \t <label class="control-label" for="selectbasic">Fill this in</label> 
 
\t \t \t \t \t <select id="selectbasic" name="selectbasic" class="form-control"> 
 
\t \t \t \t \t \t <option value="1">Option 1</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-6 col-sm-6 col-xs-6"> 
 
\t \t \t \t \t <label class="control-label" for="selectbasic">Option 2</label> 
 
\t \t \t \t \t <select id="selectbasic" name="selectbasic" class="form-control"> 
 
\t \t \t \t \t \t <option value="1">Option 1</option> 
 
\t \t \t \t \t \t <option value="2">Option 2</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </fieldset> 
 
\t </form> 
 
</div> 
 
<div id="example"> 
 
\t <div style="width:100%; white-space:nowrap;"> 
 
\t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
      </span> 
 
\t </div> 
 
\t <div id="wrapping"> 
 
\t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
      </span> 
 
\t \t <div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;"> 
 
\t \t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
       </span> 
 
\t \t \t <p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
       Sort these</span></p> 
 
\t \t </div> 
 
\t \t <div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;"> 
 
\t \t \t <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"> 
 
       </span> 
 
\t \t </div> 
 
\t </div> 
 
</div>

我把這兩個select連勝，給了他們6列。您可以將其改爲適合您的需求。

來源

2016-10-04 08:39:52 RasmusGlenvig

0

我不清楚你在說什麼「3」divs，但這裏是我提出的解決方案。您可以在google上查看更多關於「flex」的信息，「display：flex」可以成爲真正的保護者！

.form-group { 
 
    padding: 5px; 
 
} 
 

 
#inner_wrapper { 
 
    display: flex; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div class="tablebox" id="box1" style="border: solid 1px black; width:500px; height:200px;"> 
 
     <form class="form-horizontal"> 
 
      <fieldset> 
 
       <legend>Form</legend> 
 
       <div id="inner_wrapper"> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Fill this in</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label class="col-md-4 control-label" for="selectbasic">Option 2</label> 
 
        <div class="col-md-4"> 
 
         <select class="form-control" id="selectbasic" name="selectbasic"> 
 
          <option value="1">Option 1</option> 
 
          <option value="2">Option 2</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </fieldset> 
 
     </form> 
 
    </div> 
 
    <div id="example"> 
 
     <div style="width:100%; white-space:nowrap;"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
     </div> 
 
     <div id="wrapping"> 
 
      <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      <div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
       <p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">Sort these</span></p> 
 
      </div> 
 
      <div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;"> 
 
       <span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-10-04 09:52:54 coffeeak

相關問題

 相關問題