CSS：将边框设置为半宽

Question

请考虑以下事项：

<div class="box">
...
</div>

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
}

它将设置框的整个宽度的底部边框（500px）。 但是我不想将边框底部设置为整个宽度，而是设置300px，在框底部的中间，我应该怎么做..

Answer 1

你可以使用:: after或::之前的伪选择器。 喜欢：

<div> something here </div>

CSS：

div {
    width: 500px;
    height: 100px;
    position: relative;
    padding-top: 20px;
    margin-top: 50px;
}

div::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    left: 25%;
    border-top: 1px solid red;
}

以下是jsfiddle

Answer 2

你可以在盒子的底部扔一个<hr>吗？

<div class="box">
    ...
    <hr>
</div>

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}

http://jsfiddle.net/MuAKF/

Answer 3

你可以这样做：

    .box {
        position: relative;
        width: 500px;
    }
    .border {
        position: aboslute;
        background: #ccc;
        left: 100px;
        bottom: 0;
        width: 300px;
        height: 1px;
    }

    <div class="box">
        <div class="border">
        
        </div>
    </div>

但是有无限的可能性。有些在语义上比其他更正确;这个解决方案只是一个快速解决方案。

Answer 4

您可以使用背景图片：

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
    background-image:(yourimage.png); /*make your image a solid line 1px tall by 250px wide (or so)*/
    background-position: bottom left;
    background-repeat:no-repeat;
}

Answer 5

import React, {MouseEventHandler} from "react";
import {Route, RouteComponentProps, StaticContext, useHistory} from "react-router";
import {BrowserRouter, Link} from "react-router-dom";

interface IMyScreenRouteParams {
    foo: string;
}

// You don't have to extend, you could just use StaticContext
interface IMyStaticContext extends StaticContext {
    bar: string;
}

interface IHistory {
    fizz: string;
}

const Nav = () => {
    const history = useHistory<IHistory>();

    const clickHanlder: MouseEventHandler = () => {
        history.push("/my-screen", {
            fizz: "you said fizz"
        });
    };

    return (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/my-screen">My Screen</Link></li>
                <li><button onClick={clickHanlder}>My Screen with state</button></li>
                <li><Link to="/my-screen?q=hello">My Screen with query</Link></li>
                <li><Link to="/my-screen/bob">My Screen using match</Link></li>
            </ul>
            <div>
                <button onClick={() => history.goBack()}>Back</button>
                <button onClick={() => history.push("/")}>Home</button>
                <button onClick={() => history.goForward()}>Forward</button>
            </div>
        </nav>
    );
};

const MyScreen = ({
    location,
    match,
    history,
    staticContext
}: RouteComponentProps<IMyScreenRouteParams, IMyStaticContext, IHistory>) => (
    <div>
        <section>
            <h2>Location</h2>
            <p><code>location</code> has <code>IHistory</code> props.</p>
            <pre><code>{JSON.stringify(location, null, 4)}</code></pre>
        </section>
        <section>
            <h2>Match</h2>
            <p><code>match</code> has <code>IMyScreenRouteParams</code> props.</p>
            <pre><code>{JSON.stringify(match, null, 4)}</code></pre>
        </section>
        <section>
            <h2>History</h2>
            <p><code>history</code> has <code>IHistory</code> props.</p>
            <pre><code>{JSON.stringify(history, null, 4)}</code></pre>
        </section>
        <section>
            <h2>Static Context</h2>
            <p><code>staticContext</code> has <code>IMyStaticContext</code> props or whatever static context your router has.</p>
            <p>This is for a <a href="https://reacttraining.com/react-router/web/api/StaticRouter/context-object"><code>&lt;StaticRouter/&gt;</code></a>.</p>
            <pre><code>{JSON.stringify(staticContext, null, 4)}</code></pre>
        </section>
    </div>
);

const Router = () => (
    <BrowserRouter>
        <div
            style={{
                display: "flex",
                flexDirection: "row"
            }}
        >
            <Nav />
            <main>
                <Route exact path="/" component={() => (<div>Click something in the <code>&lt;nav/&gt;</code></div>)} />
                <Route exact path="/my-screen" component={MyScreen} />
                <Route exact path="/my-screen/:id" component={MyScreen} />
            </main>
        </div>
    </BrowserRouter>
);

export default Router;

Answer 6

我建议做这样的事情，在Firefox中运行良好     

<style type="text/css">

.box{

    width: 500px;

    height: 20px;

}

.boxHalfWidth{

    width: 250px;

    height: 1px;

    border-bottom: 1px solid #CCC;

}

</style>

</head>

<body>

<div class="box">

some data

<div class="boxHalfWidth"></div>

</div>

</body>

Answer 7

css:
    display: block; 
    margin: 0 auto; 
    width: 50%; 
    padding-top: 20px; 
    border-bottom: 1px solid #000;