如何在 midItem 元素周围设置适当的边框?
这是同一个小提琴的缩小代码,
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
span,.midItem {
border-style: solid;
}
.midItem {
border-color: blue;
padding: 5px;
}
p {
text-align:justify;
}
.leftPage,.rightPage{
display:inline-block;
width: 33%;
padding: 5px;
}
.centerBox {
display:table-cell;
text-align: center;
vertical-align: middle;
}
.leftBox,.rightBox {
display: table;
border-style:dotted;
border-width:5px;
width: 100px;
height: 100px;
border-color:green;
}
.leftBox,.leftPage {
float:left;
}
.rightBox,.rightPage {
float:right;
}
</style>
</head>
<body>
<span class="leftPage"><span class="leftBox"><p class="centerBox">Leftbox</p></span>
<p>Some Text</p>
</span>
<span class="rightPage"><span class="rightBox"><p class="centerBox">rightBox</p></span>
<p>SomeText</p>
</span>
<p class="midItem">SomeText</p>
</body>
</html>