alignment - CSS align text left in center div with automatic line break -

-

there quite few answers similar topic, none of helped me problem.

what i'd have list of horizontal items (for menu), 100% width of parent (for used flex).

text inside items should break automatically (without <br />, don't know texts in advance) aligned left , broken box should in middle of item. when hovered (as shown in example), entire item (including paddings) should change background color.

paddings left , right inside elements should method determined automatically, menu responsive (on mobile padding 0 , or large screens accordingly bigger).

i've attached simplified snippet of closest thing got desired result. no matter how change html structure or css, can't left align text when items centered (this overrides left align).

but not care if result different, long work without without manual work every item :).

i'd appreciate help! thanks!

    * {        margin: 0;        padding: 0;      }        ul {        /* simulate small screen */        width: 500px;        display: flex;        list-style: none;        background: aqua;      }        ul li {        padding: 10px 0;        border-left: 1px solid red;        flex-grow: 1;        flex-shrink: 1;        text-align: center;      }        ul li div {        text-align: left;        margin: 0 auto;      }        ul li:hover {        background: yellow;      }
    <ul>        <li>          <div>menu item</div>        </li>                <li>          <div>menu item name</div>        </li>                <li>          <div>menu item</div>        </li>                <li>          <div>menu</div>        </li>                <li>          <div>menu item</div>        </li>                <li>          <div>menu item name</div>        </li>                <li>          <div>menu item</div>        </li>      </ul>

wanted result (forth element wrong, image fixed hand show correct result):

enter image description here

you can either use library such bootstrap create responsive element or can put elements within table have width of screen , table handle positioning , sizing you.

<table style="width: 100%">     <tr>         <td>item 1</td>         <td>item 2</td>         <td>item 3</td>         <td>item 4</td>     </tr> <table>

https://jsfiddle.net/v1f0kz22/3/


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more