时间戳

首页 > 解决方案 > 我如何在我的表格行旁边添加 svg 文件，以便它们看起来像所附照片中一样整洁

svg - 我如何在我的表格行旁边添加 svg 文件，以便它们看起来像所附照片中一样整洁

问题描述

所以我正在建立我的交通服务网站。

在我向用户询问“接送”和“目的地”的形式中，我想要实现整洁的谷歌式外观。你可以在这里看到 google 的“from”和“to”表格：

这是谷歌想要的风格
这就是我得到的

https://www.google.com/search?q=get+a+ride&oq=get+a+ride&aqs=chrome.0.69i59l3j0j69i60j0.1495j0j4&sourceid=chrome&ie=UTF-8 （仅在移动视图中显示）

现在我尝试的方式是在表格中插入 svg 路径，如下所示：（不要介意 Rtl 方向，我需要这样）

    <table>
    <tbody>
    <tr>
    <td rowspan="2"><input type="text" name="place_from" id="from-input" class="txt" placeholder="From" /></td> .   
    <td><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      width="10px" height="10px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
      xml:space="preserve" class="dot-circle">

    <path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256
     c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"/>
    </svg></td>
    </tr>
    <tr>
    <td><svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    	     x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <style type="text/css">
	    .st0{fill:#878787;}
    </style>
    <path class="st0" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"/>
    </svg></td>
    </tr>
    <tr>
    <td  rowspan="2"><input type="text" name="place_to" id="to-input" class="txt" placeholder="To" /></td>
    <td><svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	     x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <style type="text/css">
	    .st0{fill:#878787;}
    </style>
    <path class="st0" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"/>
    </svg></td>
    </tr>
    <tr>
    <td><svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	     x="0px" y="0px" viewBox="0 0 384 512" style="enable-background:new 0 0 384 512;" xml:space="preserve">
    <style type="text/css">
	    .st0{fill:#878787;}
    </style>
    <path class="st0" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7
	    C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272z"/>
    </svg></td>
    </tr>
    </tbody>
    </table>

如您所见，它看起来很糟糕，我的问题是最接近谷歌的最佳方法是什么？

到目前为止，这是我网站的链接：http: //moveus.co.il/wp/moveus/

- - - 更新！

我尝试用<div>s 创建一个表格并得到了类似的结果，但利润率更高，我无法用 css 接缝来影响： 这就是我用 div table 实现的

     .tablewrapper {
      position: relative;
    }
    .table {
      display: table;
      
    }
    .row {
      display: table-row;
    
    
    }
    .cell {
      border: 1px solid ;
      display: table-cell;
      
      
    }
    .cell.empty
    {
      border: none;
      width: 100px;
      
    }
    .cell.rowspanned {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
      
    }
    
    .st0 {
        fill:#878787;
        transform: scale(0.1);
       
        
    }
    
    .st1 {
        fill:#878787;
        transform: scale(0.2);
    
       
    }
    
    .st4 {
        fill:#878787;
        transform: scale(0.2);
    
    
    }
    <div class="tablewrapper">
    <div class="table">
    <div class="row">
    <div class="cell"><input type="text" name="place_from" id="from-input" class="txt" /></div>
    <div class="rowspanned cell" >
      </svg>
    
    <svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    	 x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="default">
    <path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256
    	c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"/>
    </svg>
    <svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    	 x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
    	/>
    </svg>
    
    <svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    	 x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
    	/>
    </svg>
    <svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    	 x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
    <path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
    	/>
    </svg>
    
    <svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    	 x="0px" y="0px" viewBox="0 0 384 512" style="enable-background:new 0 0 384 512;" xml:space="preserve">
    <path class="st4" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7
    	C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272
    	z"/>
    </svg>
    </svg>
    </div>
    </div>
    <div class="row">
    <div class="cell"><input type="text" name="place_to" id="to-input" class="txt" /></div>
    <div class="empty cell">&nbsp;</div>
    
    </div>
    </div>
    </div>

标签： svghtml-table

解决方案

如果您将五个 SVG 合并为一个 SVG，您会发现它会容易得多。

然后你可以使用 flex-box 将你的输入堆叠成一列。然后再次使用 flex-box 将该堆栈和您的 SVG 排成一行。

[ I N P U T ]  SVG
 s p a c e r   SVG
[ I N P U T ]  SVG

演示：

.form {
  display: flex;
  flex-direction: row;
}

.form input {
  height: 27px;
}

.form .spacer {
  height: 27px;
}

.form .svg {
  padding-left: 1em;
}

svg {
  width: 27px;
  height: 100%;
}


.st0 {
  fill:#878787;
}
    
.st1 {
  fill:#878787;
}
    
.st4 {
  fill:#878787;
}
<div class="form">
  <div class="field-column">
    <div><input type="text" name="place_from" id="from-input" class="txt" /></div>
    <div class="spacer"></div>
    <div><input type="text" name="place_to" id="to-input" class="txt" /></div>
  </div>
  <div class="svg">
    <svg viewBox="0 0 512 1536">
      <path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"
            transform="translate(58,0) scale(0.77, 0.77)"/>
      <circle class="st1" cx="256" cy="540" r="60"/>
      <circle class="st1" cx="256" cy="750" r="60"/>
      <circle class="st1" cx="256" cy="960" r="60"/>
      <path class="st4" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7   	C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272z"
            transform="translate(58,1120)"/>
    </svg>
  </div>
</div>

推荐阅读