ボタンが縦に並ぶ・・・

Question

__イタリックテキスト__ボタンを横に並べていきたいのですが、どうしても縦に並んでしまいます。
<nobr>や<p>を<p style="white-space:nowrap">にしてみました。
ボタンのコードは以下です。

<p><a id="modal-open-02" class="button-link" data-target="modal-02">button</a></p>
<p><a id="modal-open-03" class="button-link" data-target="modal-03">button</a></p>
<p><a id="modal-open-04" class="button-link" data-target="modal-04">button</a></p>
<p><a id="modal-open-05" class="button-link" data-target="modal-05">button</a></p>
<p><a id="modal-open-06" class="button-link" data-target="modal-06">button</a></p>
<p><a id="modal-open-07" class="button-link" data-target="modal-07">button</a></p>
<p><a id="modal-open-08" class="button-link" data-target="modal-08">button</a></p>
<p><a id="modal-open-09" class="button-link" data-target="modal-09">button</a></p>
<p><a id="modal-open-10" class="button-link" data-target="modal-10">button</a></p>
<p><a id="modal-open-11" class="button-link" data-target="modal-11">button</a></p>
<p><a id="modal-open-12" class="button-link" data-target="modal-12">button</a></p>
<style type="text/css">
a.button-link {
	position: relative;
	display: block;
	width: 160px;
	padding: 0.8em;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.0);
	background: #1A237E;
	transition: .4s;
	border-radius: 4px;
}
a.cp_btn:hover {
	text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);
	transition: .4s;
}
</style>

Answer 1

下記のCSSを追加してください。

p {
  display: inline-block;
}

あるいは、ボタン全体を <div class="wrapper"> </div> で囲んで、

.wrapper {
  display: flex;
  flex-wrap: wrap;
}