CODEWITHSUNDEEP
htmlcss
k_rollo
k_rollo

Reputation: 5472

<span> Inside <form> Tags

I am trying to to put <span> tags inside <form> tags like this:

HTML:

<form action="myAction" method="post">
    <!-- hidden input forms here -->

    <span class="leftBrace">[</span>
        <input type="submit" value="Evaluate" class="evaluate" />
    <span class="rightBrace">]</span>
</form>

CSS:

input[type="submit"].evaluate {
    background: none;
    border: none;
    color: #0000ff;
    cursor: pointer;
    padding: 0;
}
input[type="submit"].evaluate:hover {
    text-decoration: underline;
}
.leftBrace {
    float: left;
    color: #0000ff;
}
.rightBrace {
    float: right;
    color: #0000ff;
}

Output:

enter image description here

How do I make it so it appears like:

[ Evaluate ]

I specifically prefer the braces to be outside the submit link (hence I did not make it value="[ Evaluate ]"), because I do not want the braces to be underlined on hover.

UPDATE:

I removed the float from .leftBrace and .rightBrace and added float: left to input[type=submit].

input[type="submit"].evaluate {
    background: none;
    border: none;
    color: #0000ff;
    cursor: pointer;
    padding: 0;
    float: left;
}
input[type="submit"].evaluate:hover {
    text-decoration: underline;
}
.leftBrace {
    color: #0000ff;
}
.rightBrace {
    color: #0000ff;
}

enter image description here

Upvotes: 1

Views: 6233

Answers (3)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

span are display: inline; by default and input type="submit" and are display: inline-block; so the floats in this case are unnecessary. Remove float from .leftBrace and .rightBrace and the content should display in one line.

input[type="submit"].evaluate {
    background: none;
    border: none;
    color: #0000ff;
    cursor: pointer;
    padding: 0;
}
input[type="submit"].evaluate:hover {
    text-decoration: underline;
}
.leftBrace {
    color: #0000ff;
}
.rightBrace {
    color: #0000ff;
}
<form action="myAction" method="post">
    <!-- hidden input forms here -->

    <span class="leftBrace">[</span>
        <input type="submit" value="Evaluate" class="evaluate" />
    <span class="rightBrace">]</span>
</form>

JS Fiddle: https://jsfiddle.net/qh7u0cda/

Upvotes: 1

laul
laul

Reputation: 57

try without float :

<form action="myAction" method="post">
<!-- hidden input forms here -->

<span class="leftBrace">[</span><input type="submit" value="Evaluate" class="course" /><span class="rightBrace">]</span>

Upvotes: -2

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

float is not required for brace and remove it.

.leftBrace {

    color: #0000ff;
}
.rightBrace {

    color: #0000ff;
}

Upvotes: 2

Related Questions