Question

我已经设置了一个切换按钮，我试图将其设置为样式，使其位于标题旁边（它可以是标题或包含很少单词的段落）。我用CSS设计它并尽力做到这一点。无论我设计什么，按钮始终位于标题下方。但是我想把它放在标题旁边。怎么做？

.HTML：

<p id="my_short_biography"><b>MY SHORT BIOGRAPHY</b>      

</p>       

<div id ="button_size">

<button id="button_position"><p id="show_hide">Show / Hide</p></button>

</div>

.CSS：

    #button_size{
    text-align:center;
    }

    #button_position{
    margin-top:10px;
    cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/

    background:#35b128; /*the colour of the button*/
    border:1px solid #33842a; /*required or the default border for the browser will appear*/
    /*give the button curved corners, alter the size as required*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*give the button a drop shadow*/
    -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
    box-shadow: 0 0 4px rgba(0,0,0, .75);
    /*style the text*/
    color:#f3f3f3;

    height:26px;
    }

    #button_position:hover,#button_position:focus{
    background-color :#399630; /*make the background a little darker*/
    /*reduce the drop shadow size to give a pushed button effect*/
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
    box-shadow: 0 0 1px rgba(0,0,0, .75);
    }

#my_short_biography{
font-size:25px;
color:#FF9900;
margin-left:98px;
margin-right:98px;
font-family:Mistral;
text-shadow:3px 3px 3px green;
text-decoration:underline;

}

#show_hide{
font-size:19.5px;
color:#FF9900;
font-family:Gergia;
text-shadow:3px 3px 3px green;


}

.JS：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#toggle").toggle();
  });
});
</script>

Answer 1

将按钮放在<header>或<p>标记内：

<p> PARAGRAPH
   <button>BUTTON</button>
</p>

如何在标题旁边（不在标题下）放置显示/隐藏切换按钮？

1 个答案: