位置二<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>彼此相鄰的元素

回答

相關問題