位置二<span>彼此相邻的元素

我有两个单独的<span>元素，目前出现在彼此的上方/下方。我想让它们并排出现。我读过一堆这样的答案，解决方案是使用float，但它只是不适合我（也许我的HTML/CSS关闭？）我希望能够显示/幻灯片附加文本用户悬停在该特定按钮上。位置二<span>彼此相邻的元素

HTML：

<div class="skills"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <h1>Tutoring</h1> 
        <p>Weekly one on one tutor, teaching concepts of object oriented programming and introduction to game design with Java and the Dr. Java IDE</p> 
        <button type="button" class="round-button" onclick="clickTutoring()"> 
         <span>></span> 
         <span class="button-hover">Click here to learn more</span> 
        </button> 
        <!-- ...other things here... --> 
       </div> 
      </div> 
     </div> 
</div>

CSS：

.round-button { 
    display: block; 
    width: 40px; 
    height: 40px; 
    line-height: 30px; 
    border: 2px solid #f5f5f5; 
    border-radius: 50%; 
    color: #f5f5f5; 
    text-align: center; 
    background: #464646; 
    outline: none; 
    } 

.button-hover { 
    display: inline; 
    white-space: nowrap; 
    background-color: #464646; 
}

JS：

$(document).ready(function() { 
    //Hide the Click Here text upon loading the webpage 
    $('.button-hover').hide(); 

    //Upon hovering, text will show across the across 
    var buttonHover = $(function() { 
     $('.round-button').hover(function() { 
      $('.button-hover').toggle('slide'); 
     }); 
    }); 
});

来源

2015-11-30 patrickhuang94

现在定义

.round-button { 
     position:relative;}

和这

.button-hover { 
     display: inline-block; 
     vertical-align:top; 
     position: absolute; 
     left: 35px; 
     top:5px; 
    }

演示

$(document).ready(function() { 
 
    //Hide the Click Here text upon loading the webpage 
 
    $('.button-hover').hide(); 
 

 
    //Upon hovering, text will show across the across 
 
    var buttonHover = $(function() { 
 
     $('.round-button').hover(function() { 
 
      $('.button-hover').toggle('slide'); 
 
     }); 
 
    }); 
 
});

.round-button { 
 
    display: block; 
 
    position:relative; 
 
    width: 40px; 
 
    height: 40px; 
 
    line-height: 30px; 
 
    border: 2px solid #f5f5f5; 
 
    border-radius: 50%; 
 
    color: #f5f5f5; 
 
    text-align: center; 
 
    background: #464646; 
 
    outline: none; 
 
    } 
 

 
.button-hover { 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    white-space: nowrap; 
 
    background-color: #464646; 
 
    position: absolute; 
 
    left: 35px; 
 
    top:5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="skills"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-4"> 
 
        <h1>Tutoring</h1> 
 
        <p>Weekly one on one tutor, teaching concepts of object oriented programming and introduction to game design with Java and the Dr. Java IDE</p> 
 
        <button type="button" class="round-button" onclick="clickTutoring()"> 
 
         <span>></span> 
 
         <span class="button-hover">Click here to learn more</span> 
 
        </button> 
 
        <!-- ...other things here... --> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</div>

来源

2015-11-30 09:44:30

变化

display: block;

到

display: inline-block;

来源

2015-11-30 09:40:30 void

你有button内span元素被强制只能40px在宽度，使内容下探后它不适合。如果您要在button上设置overflow:hidden，则会看到其余内容消失。如果您只想在圆圈中使用箭头，请使用height,width和border-radius属性作为目标。

来源

2015-11-30 09:41:55

你也可以在你的按钮上使用这行。

<div class="skills"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <h1>Tutoring</h1> 
        <p>Weekly one on one tutor, teaching concepts of object oriented programming and introduction to game design with Java and the Dr. Java IDE</p> 
        <div class="row"> 
         <button type="button" class="round-button" onclick="clickTutoring()"> 
          <span>></span> 
         </button> 
         <span class="button-hover">Click here to learn more</span> 
        </div> 
        <!-- ...other things here... --> 
       </div> 
      </div> 
     </div> 
    </div>

来源

2015-11-30 09:42:02 pcagica

您已经固定了按钮的宽度。因为你的跨文本将在下一行显示。将您的跨度移动到按钮区域之外。还可以为您设置display:inline-block按钮。

HTML

<button type="button" class="round-button" onclick="clickTutoring()"> 
    <span>></span>       
</button> 
<span class="button-hover">Click here to learn more</span>

CSS

.round-button { 
display: inline-block; 
width: 40px; 
height: 40px; 
line-height: 30px; 
border: 2px solid #f5f5f5; 
border-radius: 50%; 
color: #f5f5f5; 
text-align: center; 
background: #464646; 
outline: none; 
} 

.button-hover { 
display: inline-block; 
padding:5px; 
color:#fff; 
white-space:nowrap; 
background-color: #464646; 
}

DEMO

来源

2015-11-30 09:50:13

位置二<span>彼此相邻的元素

回答

相关问题