2017-05-28 76 views
0

是否有可能以及如何将输入域旋转90度? 我无法在互联网上找到任何关于此的信息。也许使用错误的关键字呢?自举输入域旋转

旧局面

无间风云

   echo'<table class="table table-striped table-fixed"> 
         <thead> 
         <tr> 
          <th class="col-md-5"> 
          <small>Firma</small> 
          <a href="?zoek='.$zoek.'&sort_name=klantnaam&sort=asc" title="'.$lang['sorteer_asc'].'"><span class="glyphicon glyphicon-sort-by-alphabet glyph_sorting" aria-hidden="true"></span></a> 
          <a href="?zoek='.$zoek.'&sort_name=klantnaam&sort=desc" title="'.$lang['sorteer_asc'].'"><span class="glyphicon glyphicon-sort-by-alphabet-alt glyph_sorting" aria-hidden="true"></span></a> 
          </th> 
          <th class="col-md-2"><small>Plaats</small></th> 
          <th class="col-md-2"><small>Telefoon</small></th> 
          <th class="col-md-3"> 
           <form action="" method="post"> 
           <div class="form-group col-xs-8"> 
            <input type="text" class="form-control input-sm" placeholder="Zoeken op" name="zoek_nieuw" value="'.$zoek.'"> 
           </div> 
            <button type="submit" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
            <button type="button" class="btn btn-sm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button> 
           </form> 
          </th> 
         </tr> 
         </thead> 
         <tbody>'; 

        while ($row = mysqli_fetch_array($res)) { $i++; echo' 
         <tr> 
          <td><small>'.$row['klantnaam'].'</small></td> 
          <td><small>'.$row['plaats']; if($row['land_code'] != 'nl') { echo ' <span class="flag"><img src="images/flags/'.$row['land_code'].'.gif"></span>'; } echo '</small></td> 
          <td><small>'.$row['tel'].'</small></td> 
          <td align="right">'; if(!empty($row['www'])) { echo '<a href="'.$row['www'].'" target="_blank"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> </a>'; } else { echo '<span class="glyphicon glyphicon-none" aria-hidden="true"></span> '; } 
          echo '<a href="http://maps.google.com/?q='.$row['klantnaam'].'+'.$row['plaats'].'" target="_blank"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></a> 
          <a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a> 
          <a href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a> 
          <a href="#"><span class="glyphicon glyphicon-stats" aria-hidden="true" data-toggle="modal" data-target=".bd-example-modal-lg'.$i.'"></span></a> 
          </td> 
         </tr>'; 
} 

回答

0

.group-control { 
 
    position:relative; 
 
    transform:rotate(90deg); 
 
    width:150px; 
 
    height:500px; 
 
    top: -147px; 
 
    left: -264px;; 
 
} 
 
.form-control { 
 
    position:relative: 
 
    top:10px; 
 
    left:10px; 
 
    } 
 
}
<div class="group-control"> 
 
\t \t \t \t \t <input class="form-control" name="test" type="text" placeholder="test input"> 
 
\t \t \t \t </div>

这里是这样做的
https://jsfiddle.net/f10y2a9z/

提琴
1

你可以用CSS场旋转:

input[type="text"]{ 
 
    transform: rotate(90deg); 
 
    position:absolute; 
 
    top: 80px; 
 
    border: thin solid #000; 
 
}
<input type="text" placeholder="test">