无法使用CSS对齐HTML和SVG元素

时间：2016-03-31 22:35:05

标签： javascript jquery html css svg

我有以下HTML和SVG元素。我已经改变了几个位置并在我的CSS中添加了一些填充 - 但是，我无法将它们彼此相邻对齐。

这是jsbin

上的代码和输出

这是我目前得到的输出 enter image description here

但是，我希望元素在页面中心彼此相邻，如下所示 enter image description here

这是我的代码

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tennis</title>
    <link rel="stylesheet" type="text/css" href="css/tennis.css">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <!--<link rel="next" href="usopenseries.html">-->
    <!--<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />-->
</head>
<body>

<div id="title" class="row">
    <!--<div id="prev">-->

    <!--</div>-->
    <!--<div class="ball">-->
        <!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
            <!--<circle cx="50" cy="50" r="25" />-->
        <!--</svg>-->
    <!--</div>-->
    <div id="tennis">Serve direction</div>
    <!--<div class="ball">-->
        <!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
            <!--<circle cx="50" cy="50" r="25" />-->
        <!--</svg>-->
    <!--</div>-->
    <!--<div id="next">-->

    <!--</div>-->
</div>
<div id="court" class="row">
    <!--<label class="control-label">Select File</label>-->
    <!--<input id="input-1" type="file" class="file">-->

    <p>Upload a csv file<br>
    <input type="file" id="myFile"/>

    <p>Select player from list<br>
    <select id="playerselect" name="playerselect">
        <option selected="true" style="display:none;">Select player</option>
        <option value="safin">Marat Safin</option>
        <option value="stepanek">Radek Stepanek</option>
    </select>

    <p>Select type of serve<br>
    <select id="serveselect" name="serveselect">
        <option selected="true" style="display:none;">Select serve</option>
        <option value="firstserve">First Serve</option>
        <option value="secondserve">Second Serve</option>
    </select>

    <svg id="tennis-court" >

        <svg onclick="recordClick(1)">
            <rect x="20" y="35" width="30" height="30" />
            <text x="21" y="50" fill="red">Deuce</text>
        </svg>

        <svg onclick="recordClick(2)">
            <rect x="50" y="35" width="30" height="30" />
            <text x="60" y="50" fill="red">Ad</text>
        </svg>

        <path d="M10 10 L10 120 L20 120 L20 10 Z" />
        <path d="M10 10 L90 10 Z" />
        <path d="M90 10 L90 120 L80 120 L80 10 Z" />
        <path d="M90 120 L10 120 Z" />
        <path d="M10 65 L90 65 Z" />
        <path d="M10 35 L90 35 Z" />
        <path d="M10 95 L90 95 Z" />
        <path d="M50 35 L50 95 Z" />

        <path d="M50 10 L50 15 Z" />
        <path d="M50 120 L50 115 Z" />

        <!--<a xlink:href="wtah2h.html"><rect x="47" y="4" width="39" height="4.5" /><path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" /><text x="47.5" y="8">WTA H2H</text></a>-->

        <!--<a xlink:href="atph2h.html"><rect x="8" y="8.5" width="18" height="27" /><path d="M8 8.5 L26 8.5 L26 35.5 L8 35.5 Z" /><text x="8.5" y="35">ATP H2H</text></a>-->

        <!--<path d="M26 8.5 L47 8.5 L47 22 L26 22 Z" />-->
        <!--<path d="M26 22 L47 22 L47 35.5 L26 35.5 Z" />-->
        <!--<path d="M8 35.5 L47 35.5 L47 40 L8 40 Z" />-->
        <!--<path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" />-->
        <!--<path d="M47 8.5 L68 8.5 L68 22 L47 22 Z" />-->
        <!--<path d="M47 22 L68 22 L68 35.5 L47 35.5 Z" />-->
        <!--<path d="M68 8.5 L86 8.5 L86 35.5 L68 35.5 Z" />-->
        <!--<path d="M47 35.5 L86 35.5 L86 40 L47 40 Z" />-->

        <!--<path d="M8 22 L9 22 Z" />-->
        <!--<path d="M86 22 L85 22 Z" />-->

<!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
        <!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
        <!--3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices 3 slices-->
        <svg onclick="recordClick(1)">
            <rect x="120" y="35" width="10" height="30" />
            <text x="120" y="50" fill="red">W</text>
            <rect x="130" y="35" width="15" height="30" />
            <text x="134" y="50" fill="red">B</text>
            <rect x="145" y="35" width="5" height="30" />
            <text x="144" y="50" fill="red">T</text>
        </svg>

        <svg onclick="recordClick(2)">
            <rect x="150" y="35" width="15" height="30" />
            <text x="150" y="50" fill="red">T</text>
            <rect x="155" y="35" width="15" height="30" />
            <text x="158" y="50" fill="red">B</text>
            <rect x="170" y="35" width="10" height="30" />
            <text x="169" y="50" fill="red">W</text>
        </svg>


        <path d="M110 10 L110 120 L120 120 L120 10 Z" />
        <path d="M110 10 L190 10 Z" />
        <path d="M190 10 L190 120 L180 120 L180 10 Z" />
        <path d="M190 120 L110 120 Z" />
        <path d="M110 65 L190 65 Z" />
        <path d="M110 35 L190 35 Z" />
        <path d="M110 95 L190 95 Z" />
        <path d="M150 35 L150 95 Z" />

        <path d="M150 10 L150 15 Z" />
        <path d="M150 120 L150 115 Z" />

<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices-->
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices-->
<!--6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices 6 slices        -->
        <svg onclick="recordClick(1)">
            <rect x="220" y="35" width="10" height="30" />
            <text x="220" y="50" fill="red">W</text>
            <rect x="230" y="35" width="15" height="30" />
            <text x="234" y="50" fill="red">B</text>
            <rect x="245" y="35" width="5" height="30" />
            <text x="244" y="50" fill="red">T</text>
        </svg>

        <svg onclick="recordClick(2)">
            <rect x="250" y="35" width="15" height="30" />
            <text x="250" y="50" fill="red">T</text>
            <rect x="255" y="35" width="15" height="30" />
            <text x="258" y="50" fill="red">B</text>
            <rect x="270" y="35" width="10" height="30" />
            <text x="269" y="50" fill="red">W</text>
        </svg>


        <path d="M210 10 L210 120 L220 120 L220 10 Z" />
        <path d="M210 10 L290 10 Z" />
        <path d="M290 10 L290 120 L280 120 L280 10 Z" />
        <path d="M290 120 L210 120 Z" />
        <path d="M210 65 L290 65 Z" />
        <path d="M210 35 L290 35 Z" />
        <path d="M210 95 L290 95 Z" />
        <path d="M250 35 L250 95 Z" />

        <path d="M250 10 L250 15 Z" />
        <path d="M250 120 L250 115 Z" />

        <!--<a xlink:href="wtah2h.html"><rect x="47" y="4" width="39" height="4.5" /><path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" /><text x="47.5" y="8">WTA H2H</text></a>-->

        <!--<a xlink:href="atph2h.html"><rect x="8" y="8.5" width="18" height="27" /><path d="M8 8.5 L26 8.5 L26 35.5 L8 35.5 Z" /><text x="8.5" y="35">ATP H2H</text></a>-->

        <!--<path d="M26 8.5 L47 8.5 L47 22 L26 22 Z" />-->
        <!--<path d="M26 22 L47 22 L47 35.5 L26 35.5 Z" />-->
        <!--<path d="M8 35.5 L47 35.5 L47 40 L8 40 Z" />-->
        <!--<path d="M47 4 L86 4 L86 8.5 L47 8.5 Z" />-->
        <!--<path d="M47 8.5 L68 8.5 L68 22 L47 22 Z" />-->
        <!--<path d="M47 22 L68 22 L68 35.5 L47 35.5 Z" />-->
        <!--<path d="M68 8.5 L86 8.5 L86 35.5 L68 35.5 Z" />-->
        <!--<path d="M47 35.5 L86 35.5 L86 40 L47 40 Z" />-->

        <!--<path d="M8 22 L9 22 Z" />-->
        <!--<path d="M86 22 L85 22 Z" />-->
    </svg>

    <button id = "visualizeBtn" onclick="myFunction()">Visualize serve</button>
</div>
<!--<div id="bottom" class="row">-->
    <!--<div class="ball">-->
        <!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
            <!--<circle cx="50" cy="50" r="25" />-->
        <!--</svg>-->
    <!--</div>-->
    <!--<div class="tennis"></div>-->
    <!--<div class="ball">-->
        <!--<svg class="ball-svg" viewbox="0 0 100 100" preserveAspectRatio="xMidYMid meet">-->
            <!--<circle cx="50" cy="50" r="25" />-->
        <!--</svg>-->
    <!--</div>-->
<!--</div>-->
<!--<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>-->
<!--<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
<!--<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<!--<script type="text/javascript" src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>-->
<!--<script type="text/javascript" src="js/tennis.js"></script>-->
<script>
//    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
//                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
//            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
//    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
//
//    ga('create', 'UA-23542009-21', 'auto');
//    ga('send', 'pageview');

    function recordClick(i)
    {
        if(i==1)
            alert("clicked Deuce court...");
        else if(i==2)
            alert("clicked Ad court...");
    }

    function myFunction()
    {
        alert("clicked on the visualize button!");
    }

</script>
</body>
</html>

上述HTML文件引用的home.css 

#court {
    /*padding-left: 10cm;*/
    height: 80%;
    max-height: 80%;
    max-width: 80%;
    overflow: hidden;
}

#tennis-court {
    height: 25%;
    width: 27.5%;
    background-color: #0A5C2F;
}

#tennis-court path {
    stroke: #ffffff;
    stroke-width: 1.5px;
    fill:none;
}

#tennis-court text {
    text-anchor: start;
    font-size: 0.95rem;
    text-decoration: none;
    stroke: #ffffff;
    stroke-width: 0.1px;
    fill: #ffffff;
}

#tennis-court rect {
    fill: #0A5C2F;
    stroke-width: 0.1px;
}

#tennis-court rect:hover {
    fill: #ccff00;
}

#myFile
{
    /*padding-left: 1cm;*/
    /*padding-top: 10cm;*/
    padding-left: 2cm;
}

#visualizeBtn
{
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

以上HTML文件引用的tennis.css 

html, body {
    height: 100%;
    width: 100%;
}

a, a:visited, a:focus, a:hover {
    color: #0A5C2F !important;
    text-decoration: none !important;
}

svg a, svg a:visited, svg a:focus, svg a:hover {
    color: #0A5C2F;
    text-decoration: none;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.button {
    font-size: 1.4rem;
    line-height: 2rem;
}

.button:hover, .button.active:hover {
    opacity: 0.5;
    cursor: pointer;
}

/* top bar */
#title, #bottom {
    height: 10%;
    text-align: center;
    display: table;
    table-layout: fixed;
    margin: 0;
    width: 100%;
}

#title a:hover {
    opacity: 0.5;
}

.ball {
    width: 5%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
}

.ball-svg {
    float: right;
    max-height: 50px;
}

.ball-svg circle {
    fill: #ccff00;
}

#tennis {
    display: table-cell;
    vertical-align: middle;
    width: 30%;
    font-size: 3rem;
    color: #0A5C2F;
}

#prev, #next {
    display: table-cell;
    vertical-align: middle;
    width: 30%;
    font-size: 1.5rem;
    color: #0A5C2F;
}

/* main */
#main {
    height: 90%;
    max-height: 90%;
    max-width: 100%;
    overflow: hidden;
}

#main text {
    font-size: 1rem;
    text-anchor: middle;
}wwq

#main circle:hover {
    cursor: pointer;
}



/* options */
#options {
    height: 10%;
    text-align: center;
    display: table;
    table-layout: fixed;
    margin: 0;
    width: 100%;
}

#options-1-table, #options-2-table {
    display: table;
    height: 100%;
    width: 100%;
}

#options-1, #options-2 {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 35%;
}

/* chart */
#chart-row {
    height: 90%;
}

#chart {
    height: 100%;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

#chart-title {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    width: 30%;
    font-size: 1.4rem;
    background-color: #0A5C2F;
    color: #ffffff;
}

1 个答案:

答案 0 :(得分：1)

使用 =IF(A2>DATE(2016,3,1),0,ROUND(YEARFRAC(DATE(YEAR(A2),MONTH(A2),1),DATE(2016,3,1))*12,0)) 包含要水平对齐的块并将其设置为div

的CSS：

float: left;

HTML：

#court div {
  float: left;
}

http://jsbin.com/sizahedehe/1/edit?html,css,output

相关问题
最新问题