Question

我有两个单独的<span>元素，它们当前出现在彼此的顶部/下方。我想让它们并排出现。我已经阅读了很多像这样的答案，解决方法是使用float，但它只是不适合我（也许我的HTML / CSS关闭？）我希望能够用户将鼠标悬停在该特定按钮上时显示/滑动其他文本。

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');
        });
    });
});

Answer 1

您也可以在按钮上使用行。

 <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>

Answer 2

现在定义你的

.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>

Answer 3

您已修复按钮的宽度。因为你的跨度文本将显示在下一行。将您的跨度移动到按钮区域之外。同时为您按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

Answer 4

更改

display: block;

到

display: inline-block;

Answer 5

span内的button元素的宽度仅为40px，因此内容在不适合后会丢失。如果您要在overflow:hidden上设置button，则会看到其他内容消失。如果您只想在圈子中显示箭头，请使用height，width和border-radius属性进行定位。

将两个<span>元素放在一起

5 个答案: