搜索
搜索

如何将绿色按钮移动到他居中且箭头仍在其旁边的位置？

debugcn 发表于 Dev
10
艾琳·沃克（Erin Walker）

在此处输入图片说明

你好，

所以我想将按钮移到中心，但仍然有箭头，然后单击它旁边的此处。当前图像（箭头，然后单击此处）正在将其推到中心。如果下一行箭头没有出现，似乎无法使其正常工作。这是我的代码（请立即获取图片http://www.clevercontracts.co.za/wp-content/uploads/2015/03/hand_arrow.png-有什么想法吗？

/**
 * Header 17 stylesheet  
 * */
.header-17-startup-antiflicker {
  background:white!important
}
 
.header-17 {
  z-index:100;
  width:100%;
  height:100px;
  padding-top:0;
  padding-bottom:0
}
 
.header-17 .header-background {
  background:#fff
}
 
.header-17 .navbar {
  position:absolute;
  z-index:2;
  top:0;
  margin:0
}
 
.header-17 .navbar.navbar-fixed-top {
  top:0!important
}
 
.header-17 .navbar .navbar-form {
  padding:30px 0 19px 60px
}
 
.header-17 .navbar .btn {
  padding-left:26px;
  padding-right:26px;
  font-size:14px;
  font-weight:normal;
  color:#ffffff;
  font-weight:800
}
 
.header-17 .navbar .btn.btn-primary {
  background-color:#16a085
}
 
.header-17 .navbar .btn.btn-primary:hover,.header-17 .navbar .btn.btn-primary:focus {
  background-color:#16a085
}
 
.header-17 .navbar .btn.btn-primary:active,.header-17 .navbar .btn.btn-primary.active {
  background-color:#16a085
}
 
.header-17 .navbar .brand {
  padding-top:33px!important;
  font-size:25px;
  font-weight:normal;
  font-weight:800;
  letter-spacing:0;
  color:#1f2225;
  position:relative;
  overflow:hidden
}
 
.header-17 .navbar .brand img:first-child {
  float:left;
  margin:0 15px 0 2px;
  position:relative;
  z-index:2
}
 
.header-17 .navbar .nav > li {
  margin-left:24px
}
 
.header-17 .navbar .nav > li:first-child {
  margin-left:0
}
 
.header-17 .navbar .nav > li > a {
  text-transform:uppercase;
  padding:42px 0 24px;
  font-size:14px;
  font-weight:normal;
  color:#1f2225;
  font-weight:800;
  color:#95a5a6
}
 
.header-17 .navbar .nav > li > a:hover,.header-17 .navbar .nav > li > a:focus,.header-17 .navbar .nav > li > a.active {
  color:#1f2225
}
 
.header-17 .navbar .nav > li.active > a {
  color:#1f2225
}
 
.header-17 .navbar .nav > li.active > a:hover,.header-17 .navbar .nav > li.active > a:focus,.header-17 .navbar .nav > li.active > a.active {
  color:#1f2225
}
 
.header-17 .navbar .navbar-toggle {
  background-image:url(http://www.clevercontracts.co.za/wp-content/themes/startup/templates/startup-framework/build-wp/common-files/icons/[email protected]);
  -webkit-background-size:17px 12px;
  -moz-background-size:17px 12px;
  -o-background-size:17px 12px;
  background-size:17px 12px;
  margin-top:34px
}
 
.header-17-sub {
  position:relative!important;
  background-color:#1F2225;
  padding-top:105px;
  padding-bottom:105px;
  color:#7f8c8d
}
 
.header-17-sub .dm-carousel {
  height:48px
}
 
.header-17-sub.v-center,.header-17-sub .v-center {
  display:table;
  width:100%
}
 
.header-17-sub.v-center > div,.header-17-sub .v-center > div {
  display:table-cell;
  vertical-align:middle;
  margin-top:0;
  margin-bottom:0;
  float:none
}
 
@media (min-width: 768px) {
 .header-17-sub .v-center.row:before,.header-17-sub .v-center.row:after {
   display:none
 }
 
}
 
@media (max-width: 767px) {
 .header-17-sub .v-center {
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   padding-left:5px;
   padding-right:5px
 }
  
 .header-17-sub .v-center.row {
   display:block;
   width:auto
 }
  
 .header-17-sub .v-center.row:before,.header-17-sub .v-center.row:after {
   display:none
 }
  
 .header-17-sub .v-center.row > * {
   display:block;
   vertical-align:baseline
 }
 
}
 
.header-17-sub .row.v-center {
  width:auto
}
 
.header-17-sub .btn.btn-clear {
  font-size:20px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  padding:20px 25px 21px;
  background:#16a085;
  border:2px solid #16a085
}
 
.header-17-sub .btn.btn-clear:hover,.header-17-sub .btn.btn-clear:focus {
  border-color:#fff;
  background:#16a085
}
 
.header-17-sub .btn.btn-clear:active,.header-17-sub .btn.btn-clear.active {
  border-color:#fff;
  background:#16a085;
  color:rgba(255,255,255,0.75)
}
 
.header-17-sub .btn.btn-clear {
  font-size:30px;
  font-weight:normal;
  color:#fff;
  margin:-2px 15px 0 0
}
 
@media (max-width: 480px) {
 .header-17-sub .btn.btn-clear {
   font-size:18px;
   font-weight:normal;
   color:#fff;
   display:block;
   min-width:260px
 }
  
 .header-17-sub .btn.btn-clear [class*="fui-"] {
   float:left
 }
 
}
 
.header-17-sub h3 {
  margin:0 0 10px
}
 
.header-17-sub .hero-unit {
  margin:40px 0 60px;
  padding:0;
  background:transparent
}
 
.header-17-sub .hero-unit h1 {
  margin:0;
  font-size:39px;
  font-weight:normal;
  color:#ffffff;
  line-height:49px;
  font-weight:500;
  letter-spacing:0
}
 
.header-17-sub .hero-unit p {
  padding:20px 0 0;
  font-size:28px;
  font-weight:normal;
  color:#ffffff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300
}
 
@media (max-width: 480px) {
 .header-17-sub .hero-unit {
   text-align:left;
   margin:0 0 33px
 }
  
 .header-17-sub .hero-unit h1 {
   margin:0 0 23px;
   font-size:25px;
   font-weight:normal;
   color:#ffffff;
   line-height:32px
 }
  
 .header-17-sub .hero-unit p {
   font-size:17px;
   font-weight:normal;
   color:#7f8c8d;
   line-height:23px
 }
 
}
 
.header-17-sub .hero-unit,.header-17-sub big,.header-17-sub h1,.header-17-sub .h1,.header-17-sub h2,.header-17-sub .h2,.header-17-sub h3,.header-17-sub .h3,.header-17-sub h4,.header-17-sub .h4,.header-17-sub h5,.header-17-sub .h5,.header-17-sub h6,.header-17-sub .h6 {
  color:white
}
 
.header-17-sub .btn.btn-clear {
  color:#fff
}
 
.header-17-sub .btn.btn-clear:hover,.header-17-sub .btn.btn-clear:focus {
  color:white
}
 
.header-17-sub .btn.btn-clear:active,.header-17-sub .btn.btn-clear.active {
  color:rgba(255,255,255,0.75)
}
 
.header-17-sub big {
  font-size:22px;
  font-weight:normal;
  color:#ffffff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  line-height:32px
}
 
.header-17-sub h6 {
  font-size:18px;
  font-weight:normal;
  color:#ffffff;
  font-weight:500;
  text-transform:none
}
 
.header-17-sub .pt-perspective {
  position:relative;
  height:100%;
  -webkit-perspective:1200px;
  -moz-perspective:1200px;
  perspective:1200px
}
 
.header-17-sub .pt-page {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  visibility:hidden;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  transform-style:preserve-3d
}
 
.header-17-sub .pt-page.pt-page-current {
  position:relative
}
 
.header-17-sub .calculated .pt-page.pt-page-current {
  position:absolute
}
 
.header-17-sub .pt-page-current,.header-17-sub .no-js .pt-page {
  visibility:visible;
  z-index:1
}
 
.header-17-sub .pt-page-ontop {
  z-index:999
}
 
.header-17-sub .page-transitions {
  margin:85px 0 100px
}
 
.header-17-sub .page-transitions .col-sm-3 {
  text-align:left
}
 
.header-17-sub .img-holder {
  text-align:center
}
 
.header-17-sub .img-wrapper {
  display:inline-block
}
 
.header-17-sub .pt-controls {
  position:absolute;
  bottom:-100px;
  left:0;
  right:0;
  text-align:center
}
 
.header-17-sub .pt-controls .pt-indicators {
  list-style:none;
  margin:0;
  padding:0
}
 
.header-17-sub .pt-controls .pt-indicators li {
  line-height:18px;
  display:inline-block;
  width:9px;
  height:9px;
  text-indent:-999px;
  background-color:rgba(127,140,141,0.3);
  border-radius:50%;
  cursor:pointer
}
 
.header-17-sub .pt-controls .pt-indicators li + li {
  margin-left:10px
}
 
.header-17-sub .pt-controls .pt-indicators li.active {
  background-color:#1abc9c
}
 
@media (max-width: 767px) {
 .header-17-sub .page-transitions .col-sm-3 {
   text-align:center
 }
  
 .header-17-sub .page-transitions .col-sm-6 {
   margin:40px 0
 }
 
}
 
@media (max-width: 480px) {
 .header-17-sub {
   padding-top:65px;
   padding-bottom:65px
 }
 
}
 
.header-17-sub .btn.btn-huge.fui-facebook {
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
}
 
.header-17-sub .btn.btn-huge.fui-facebook:before {
  margin-right:15px;
  display:inline-block;
  vertical-align:top;
  font-size:30px;
  font-family:'Flat-UI-Pro-Icons'
}
 
.header-17-sub .btn.btn-huge.fui-facebook:hover:before {
  color:#fff
}
<header class="header-17">
   <div class="container">
     <div class="row">
       <div class="navbar col-sm-12" role="navigation">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle">
           </button> <a href="/" class="brand custom-img"><img alt="" src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/Screen-Shot-2015-03-01-at-1.04.39-PM-e1425234548831.png"> </a>
         </div>
         <div class="collapse navbar-collapse pull-right">
           <div class="pull-left">
             <ul class="nav">
               <li><a href="#">Home</a> </li>
               <li><a href="http://www.clevercontracts.co.za/?p=67">Contracts</a> </li>
               <li><a href="#">Blog</a> </li>
               <li><a href="#">Contact</a> </li>
             </ul>
           </div>
           <form class="navbar-form pull-left" action="action">
             <a href="/" class="btn btn-primary">GET STARTED </a>
           </form>
         </div>
       </div>
     </div>
   </div>
   <div class="header-background">
   </div>
 </header>
 <section class="header-17-sub text-center dm-controlsView-holder" style="background-color: #1f2225">
   <div class="background" style="background-image: url(http://www.clevercontracts.co.za/wp-content/themes/startup/templates/startup-framework/build-../../../../../../uploads/2015/02/homepage_background-1400x948-53520.jpg); opacity: 0.54">
     &nbsp;
   </div>
   <div class="container">
     <div class="row">
       <div class="col-sm-10 col-sm-offset-1">
         <div class="hero-unit">
           <h1>Easily create the perfect contract</h1>
           <p>Clever contracts makes it super easy &amp; simple for anyone to create a legally tight contact ready to be signed. We'll guide you through each step.</p>
         </div>
          <a href="/" class="btn btn-huge btn-clear">GET STARTED NOW</a> <img src="http://www.clevercontracts.co.za/wp-content/uploads/2015/03/hand_arrow.png" alt="image">
         <div id="h-17-pt-1-61" class="page-transitions pt-perspective">
           <div class="pt-page">
             <div class="row v-center">
               <div class="col-sm-3 ani-processed">
                 <big>Protect yourself from lawsuits and a possible court summons.</big>
               </div>
               <div class="col-sm-6 ani-processed">
                 <img width="384" height="191" alt="" src="http://www.clevercontracts.co.za/wp-content/themes/startup/templates/startup-framework/build-wp/common-files/img/header/[email protected]">
               </div>
               <div class="col-sm-3 ani-processed">
                 <h6>Live Easy</h6>
                  <span>Creating a contract has never been this easy.Only R89 per contract.</span>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </section>

布雷特·卡斯威尔（Brett Caswell）

将a标签包裹在标签上，并在img标签上div居中放置..并在img标签上使用定位。

section {
  text-align:center;
  background-color:brown;
  }


div.btnwrapper, a.btn
{
  width:10em;
  height:2em;
  display:block;
  overflow:visible;
  margin:auto;
  padding:0;
  }

div.btnwrapper
{
  position:relative;
  background-color:gray;
  line-height:2em;
}

a.btn {background-color:skyblue;text-decoration:none;}

div.img {
  width:8em;background-color:white;border:0e;display:block;padding:0 1em;
  position:absolute;left:100%;top:0;
}
<section>
  <p> This is text </p>
  <div class="btnwrapper">
    <a href="#" class="btn">CLICK ME</a>
    <div class="img">An Image</div>
  </div>
  <p>Other text</p>
</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将按钮移动到随机位置？（迅速）

来自分类Dev

如何将按钮移动到随机位置？（迅速）

来自分类Dev

如何将按钮移动到确切位置？

来自分类Dev

如何将列的内容移动到它旁边的列

来自分类Dev

根据身高div将div移动到他

来自分类Dev

如何将按钮移动到随机位置？（快速）在iAd展示时

来自分类Dev

如何将按钮移动到随机位置？（快速）在iAd展示时

来自分类Dev

如何将搜索结果居中显示在中心位置，而不是将匹配的行移动到终端的顶部

来自分类Dev

如何将node_modules正确移动到其他位置

来自分类Dev

我们如何将工作目录移动到其他位置？

来自分类Dev

如何将 xml 元素移动到布局中的其他位置？

来自分类Dev

每次单击按钮时，如何将“li”元素从当前位置移动到第 n 个位置？

来自分类Dev

如何将一个gameObject从他的位置统一移动到另一个对象位置？

来自分类Dev

如何将元素移动到鼠标位置

来自分类Dev

如何将小部件移动到特定位置？

来自分类Dev

如何将水印移动到视频位置并停止？

来自分类Dev

您如何将信封移动到特定位置？

来自分类Dev

如何将 pawn 移动到它的位置

来自分类Dev

如何将图标移动到此社交按钮的中心？

来自分类Dev

如何将桌子移动到其他桌子里面

来自分类Dev

如何将分区移动到C驱动器旁边（以扩展驱动器C）

来自分类Dev

如何将下拉箭头从左侧移动到右侧（默认情况下是在flutter中）？

来自分类Dev

GWT CellTable-如何将排序箭头从左侧移动到右侧

来自分类Dev

如何将这个div放在其他人的旁边？

来自分类Dev

如何将对象移动到THREE.JS中的其他对象位置？

来自分类Dev

如何将对象移动到THREE.JS中的其他对象位置？

来自分类Dev

通过单击 UI 按钮而不是多次单击，将游戏对象移动或缓慢移动到其他游戏对象的位置？

来自分类Dev

如何将块移动到lib

来自分类Dev

如何将容器移动到中间？

Related 相关文章

  1. 1

    如何将按钮移动到随机位置？（迅速）

  2. 2

    如何将按钮移动到随机位置？（迅速）

  3. 3

    如何将按钮移动到确切位置？

  4. 4

    如何将列的内容移动到它旁边的列

  5. 5

    根据身高div将div移动到他

  6. 6

    如何将按钮移动到随机位置？（快速）在iAd展示时

  7. 7

    如何将按钮移动到随机位置？（快速）在iAd展示时

  8. 8

    如何将搜索结果居中显示在中心位置，而不是将匹配的行移动到终端的顶部

  9. 9

    如何将node_modules正确移动到其他位置

  10. 10

    我们如何将工作目录移动到其他位置？

  11. 11

    如何将 xml 元素移动到布局中的其他位置？

  12. 12

    每次单击按钮时，如何将“li”元素从当前位置移动到第 n 个位置？

  13. 13

    如何将一个gameObject从他的位置统一移动到另一个对象位置？

  14. 14

    如何将元素移动到鼠标位置

  15. 15

    如何将小部件移动到特定位置？

  16. 16

    如何将水印移动到视频位置并停止？

  17. 17

    您如何将信封移动到特定位置？

  18. 18

    如何将 pawn 移动到它的位置

  19. 19

    如何将图标移动到此社交按钮的中心？

  20. 20

    如何将桌子移动到其他桌子里面

  21. 21

    如何将分区移动到C驱动器旁边（以扩展驱动器C）

  22. 22

    如何将下拉箭头从左侧移动到右侧（默认情况下是在flutter中）？

  23. 23

    GWT CellTable-如何将排序箭头从左侧移动到右侧

  24. 24

    如何将这个div放在其他人的旁边？

  25. 25

    如何将对象移动到THREE.JS中的其他对象位置？

  26. 26

    如何将对象移动到THREE.JS中的其他对象位置？

  27. 27

    通过单击 UI 按钮而不是多次单击，将游戏对象移动或缓慢移动到其他游戏对象的位置？

  28. 28

    如何将块移动到lib

  29. 29

    如何将容器移动到中间？

热门标签

归档